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

所以，在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_06.使用Mybatis完成DAO层的开发_4 Mybatis中使用Dao实现类的执行过程分析-查询方法

    delete方法没有并SqlSession的delete方法,而是调用的Upadte方法. 在测试类这里加断点. 实际的方法体内也加断点 运行测试方法,选择debug的方式 走到断点这里.会看到fac ...

  2. 【命令汇总】Windows 应急响应

    日期:2019-06-07 16:11:49 作者:Bay0net 介绍:Windows 应急响应.取证及溯源相关内容学习记录 0x00.前言 常见的应急分类: web入侵:网页挂马.主页篡改.Web ...

  3. ArchLinux下XFCE的一个问题修复：thunar加载的环境变量不正确

    家里的电脑上,安装了Arch32与Arch64.不记得以前做过什么操作, 导致在Arch32下,Thunar启动后,其环境变量缺失很多内容. 主要在PATH及LD_LIBRARY_PATH几个关键变量 ...

  4. chrome 74 版本的chromedriver下载地址

    微信扫二维码关注我的公众号,回复chromedriver 即可获取windows,liunx,mac版本最新selenium-chromedriver

  5. js 中 json.stringfy()将对象、数组转换成字符串

    json.stringfy()将对象.数组转换成字符串 var student = new Object(); student.name = "Lanny"; student.ag ...

  6. linux 通配符与正则表达式

    linux通配符和三剑客(grep.awk.sed)正则表达式是不一样的 通配符一般用户命令行bash环境,而linux正则表达式用于awk.grep.sed

  7. Python解释器判断整数相加溢出

    溢出,则和的最高位(即符号位)与两个加数都不相同,例如 1)非负数+非负数=负数 2)负数+负数=非负数 那么,假设x为a与b的和,((a^b)>=0 && (x^a)<0 ...

  8. [Git] 025 标签命令

    0. 前言 小时候看<剑花-烟雨-江南>,惊讶于那个多重身份的"小侯爷" 后来发现,现实中拥有比小侯爷更多身份的人多如牛毛 其实,在 "Git" 中 ...

  9. Luogu P1084 [NOIP2012]疫情控制

    题目 首先我们二分一下答案. 然后我们用倍增让军队往上跳,最多先跳到根的子节点. 如果当前军队可以到达根节点,那么记录一下它的编号和它到达根节点后还可以走的时间. 并且我们记录根节点的叶子节点上到根节 ...

  10. JProfiler> ERROR: Invalid license key. Aborting.

    用IDEA+Tomcat的方式打开JProfiler,出现错误 1,Event Log 出错 16:10 Application Server was not connected before run ...