vue项目图片路径问题

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


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

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

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

先把图片通过import导入,前面的../../直接改成 @ 就可以了,然后就可以通过上面图片这样的设置来显示了。
如果是要动态的话可以在方法里面通过this点属性来修改它:

vue项目图片路径问题的更多相关文章
- vue 关于图片路径的问题
在vue 中,当我们想加载assets中的图片,本人按照多年的开发经验会这样写,那是没问题的 <img src="../assets.1.jpg"/> 如果我要用v-b ...
- Vue项目图片剪切上传——vue-cropper的使用
最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求.上网百度了一番,发现好多用的都是vue-cropper.我也就用了,个人感觉还是挺好用的.现 ...
- HBuilderX 打包 uniapp 项目 图片路径不显示(不正确)
打包h5项目本地服务运行正常 部署后页面显示空白 在根目录manifest.json中配置h5下的publicPath即可 "h5" : { "template" ...
- vue的图片路径,和背景图片路径打包后错误解决
最近在研究vue,老实的按照官网提供的,搭建的了 webpack+vue+vuex+vue-router,,因为是自己搭建的,所以踩了不少坑,一般问题百度都有,这个背景图片的问题,查了很久才解决. 1 ...
- vue实现图片路径传送
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- freemarker与vue使用图片路径获取问题,可双单引号一起使用则可
<el-table :data="leftPage.datas" style="width: 100%" @selection-change=" ...
- vue项目sql图片动态路径引用问题
最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...
- vue项目打包上线时的配置操作
vue的图片路径,和背景图片路径打包后错误解决 2017-12-11 16:00 by muamaker, 7037 阅读, 0 评论, 收藏, 编辑 最近在研究vue,老实的按照官网提供的,搭建的了 ...
- vue项目遇到的坑
一.启动项目问题 1. 如何从git上拉下项目:点我 2. 启动项目失败: 点我 and 点我 二.搭建项目问题 1. 先改分辨率,否则可能影响布局 以我的项目为例,分辨率修改位置如下: 2. .v ...
随机推荐
- Visual Studio Code 折叠代码快捷键
为了快速阅读不熟悉的代码, 最好可以打开一个文件能先将具体实现折叠起来的,进行一个大概的认识,vscode中有这些折叠快捷键: ctrl+shift+[是折叠 ctrl+k ctrl+0 是折叠全部 ...
- list,string,tuple,dictionary之间的转换
list,string,tuple,dictionary之间的转换 类型 String List tuple dictionary String - list(str), str.split() tu ...
- Linux监控命令之==>vmstat
一.使用说明 vmstat 可以对操作系统的内存信息.进程状态.CPU 活动.磁盘等信息进行监控,不足之处是无法对某个进程进行深入分析. 二.用法及参数说明 -a:显示活跃和非活跃内存 -f:显示从系 ...
- 中国MOOC_零基础学Java语言_第4周 循环控制_1素数和
第4周编程题 查看帮助 返回 第4周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...
- charles抓包教程
百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...
- Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.3 Propositional Equivalences
DEFINITION 1 A compound proposition that is always true,no matter what the truth values of the propo ...
- 深入理解java:1.1.1. 反射机制
反射 到底什么是反射(Reflection)呢? 反射有时候也被称为内省(Introspection),事实上,反射,就是一种内省的方式, Java不允许在运行时改变程序结构或类型变量的结构,但它允许 ...
- 删除MicrosoftOffice2016的扫尾工作
因为用到一些画流程图之类的工具,想到以前用的Visio挺好用的,就找来安装一下,结果因为装了Microsoft Office2016在安装时报错不断,先说下网上的帖子:用OfficeDeploymen ...
- 剑指Offer编程题(Java实现)——链表中倒数第k个结点
题目描述 输入一个链表,输出该链表中倒数第k个结点. 注意: 该题目不可以用先反转链表再输出第k个结点的方式,因为反转链表会改变该结点的next指向 思路一 使用栈Stack倒序存储,顺序pop第k个 ...
- 粉丝福利:收藏已久的Java架构资料免费送(仅限3天)
有段时间没跟各位粉丝分享编程资源福利了,看了下自己的百度网盘,就剩下这个我认为是比较好的Java架构师学习资料了,相信这套资料可以对你进阶高级工程师有帮助. Java架构师技术进阶路线图 架构技术进阶 ...