一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的，

所以，在vue中一般是这样的：

但是这样你会发现，图片根本显示不出来，只是显示了个图片的图标。

后来发现通过require了路径之后可以正常显示。

但是这样感觉还是不太好，因为我不想声明怎么多变量。于是就成了这样：

先把图片通过import导入，前面的../../直接改成 @ 就可以了，然后就可以通过上面图片这样的设置来显示了。

如果是要动态的话可以在方法里面通过this点属性来修改它：

vue项目图片路径问题的更多相关文章

  1. vue 关于图片路径的问题

    在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...

  2. Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...

  3. HBuilderX 打包 uniapp 项目 图片路径不显示(不正确)

    打包h5项目本地服务运行正常 部署后页面显示空白 在根目录manifest.json中配置h5下的publicPath即可 "h5" : { "template" ...

  4. vue的图片路径，和背景图片路径打包后错误解决

    最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...

  5. vue实现图片路径传送

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. freemarker与vue使用图片路径获取问题，可双单引号一起使用则可

    <el-table :data="leftPage.datas" style="width: 100%"  @selection-change=" ...

  7. vue项目sql图片动态路径引用问题

    最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...

  8. vue项目打包上线时的配置操作

    vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...

  9. vue项目遇到的坑

    一.启动项目问题 1. 如何从git上拉下项目:点我  2. 启动项目失败: 点我 and 点我 二.搭建项目问题 1. 先改分辨率,否则可能影响布局 以我的项目为例,分辨率修改位置如下: 2. .v ...

随机推荐

  1. 阶段3 1.Mybatis_08.动态SQL_03.mybatis中动态sql语句-foreach和sql标签

    foreach标签 in的查询 sql语句好写,但是传参在映射文件里面改怎么传呢 定义一个List<Integer>成员变量,然后生成get和set 定义一个新的查询方法 open:开始符 ...

  2. linux--vm安装

    网络排错图解 https://www.linuxidc.com/Linux/2017-03/141863.htm net模式 https://www.linuxidc.com/Linux/2017-0 ...

  3. python 并发编程 多进程 互斥锁与join区别

    互斥锁与join 互斥锁和join都可以把并发变成串行 以下代码是用join实现串行 from multiprocessing import Process import time import js ...

  4. MySQL数据库的特点和优势

    MySQL数据库的特点和优势: 1.MySQL性能卓越.服务稳定,很少出现异常宕机. 2.MySQL开放源代码且无版权制约,自主性及使用成本低. 3.MySQL历史悠久,用户使用活跃,遇到问题可以寻求 ...

  5. JSP技术学习总结

    1.JSP的执行过程 首先用户向服务器发出请求,服务器在接收请求后去寻找响应的jsp页面,然后服务器将jsp页面翻译成.java文件,然后进行编译得到.class字节码文件,服务器执行class文件将 ...

  6. S-Nim HDU 1536 博弈 sg函数

    S-Nim HDU 1536 博弈 sg函数 题意 首先输入K,表示一个集合的大小,之后输入集合,表示对于这对石子只能去这个集合中的元素的个数,之后输入 一个m表示接下来对于这个集合要进行m次询问,之 ...

  7. MySQL总结（3）

    ORDER BY 与 GROUP BY ORDER BY GROUP BY 排序产生的输出 分组行.但输出可能不是分组的顺序 不一定需要 如果与聚集函数一起使用列(或表达式)则必须使用 任意列都可以使 ...

  8. Python win32com模块 合并文件夹内多个docx文件为一个docx

    Python win32com模块 合并文件夹内多个docx文件为一个docx #!/usr/bin/env python # -*- coding: utf-8 -*- from win32com. ...

  9. D-多连块拼图

    多连块是指由多个等大正方形边与边连接而成的平面连通图形. – 维基百科 给一个大多连块和小多连块,你的任务是判断大多连块是否可以由两个这样的小多连块拼成.小多连块只能平移,不能旋转或者翻转.两个小多连 ...

  10. kotlin学习（10）反射

    反射,简单来说,是一种在运行时动态地访问对象属性和方法的方式,而不需要事先确定这些属性是什么. Kotlin反射API:KClass.KCallable.KFunction.KPropperty KC ...