解决vuecli3中img src 的引入问题
79 浏览量
2020-10-15
00:31:18
上传
评论
收藏 61KB PDF 举报
解决解决vuecli3中中img src 的引入问题的引入问题
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来
看看吧
最近公司要做一个在线ps 的项目 但是后台没写完, 我在用本地图片上传预览的时候 发现图片不能显示, 解决的办法 是
//页面的结构
<div class="workspace" >
<img :src='img'>
</div>
export default {
data() {
return {
img:require('../../assets/fapiao.jpeg'),
//这里只能使用require的方式去使用 如果img 是数组, 就用
//[require('../../assets/fapiao1.jpeg'),
//require('../../assets/fapiao2.jpeg'),
//require('../../assets/fapiao3.jpeg').....]
fileList: []
};
},
}
之前我用了绝对路径和 相对路径 都没有办法实现, 后来查官方文档是因为没有存放静态的asset 文件了 ,静态现在存放在public
的里面. 但是我在public里面去创建一个img 的文件,去放置图片,依然不可以. 所以 三种办法里面 只有require 使用vuecli3 ,
如果大家有好的解决办法 可以一起分享
1、在模板中直接引入图片资源（这种一般是@ 或者./ 去引入）
2、将图片资源放在static文件夹下
3、图片资源在assets文件夹下，data中必须用require加载，否则会当成字符串来处理
(我自己目前就是放在assets 里面. 因为是本地上传的 在做假数据的时候准备做一个预览,或者说以后的默认图片就是它了)
第二种，只要给图片放在static文件夹下即可：原因如下
这里在使用vuecli脚手脚构建工具，目录下会生成一个static目录，表示的是静态目录，推荐大家将img 存放在这个目录下，那
么在webpack编译以后，依旧是可以获取到这个目录下的路径，这样就解决了路径不符而导致图片加载不出来的问题！当然项
目中用的一般都是绝对路径，少数图片的话，这种方式挺好
但是 重点: vuecli3 没有static 啊!!!
=======补充补充
<ul>
<li v-for="(item,index) in src" :key="index" @click="jump">
<img :src="item" alt>
</li>
</ul>
export default {
data() {
return {
centerDialogVisible: false,
form: {
LoginName: "",
PassWord: ""
},
rules: {
LoginName: [
{ required: true, message: "请输入用户名", trigger: "blur" }
],
PassWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
},
message: "",
src: [
require("../assets/imgs/001.jpg"),
require("../assets/imgs/002.jpg"),
require("../assets/imgs/003.jpg"),
require("../assets/imgs/004.jpg"),
require("../assets/imgs/005.jpg")
]
};
资源评论
weixin_38584058
- 粉丝: 5
- 资源: 971
最新资源
- 常用工具集参考用于图像等数据处理
- 音乐展示网页、基于Stenography的图像数字水印添加与提取，以及基于颜色矩和Tamura算法的图像相似度评估算法py源码
- 基于EmguCV(OpenCV .net封装)，图像数字水印加解密算法的实现,其中包含最低有效位算法,离散傅里叶变换算法+文档书
- 基于matlab+DWT的图像水印项目，数字水印+源代码+文档说明+图片+报告pdf
- (优秀毕业设计)基于python实现的数字图像可视化水印系统的设计与实现，多种数字算法实现+源代码+文档说明+理论演示pdf
- 基于DWT-DCT-SVD和deflate压缩的数字水印方法python源码+Gui界面+演示视频(高分毕业设计)
- 基于matlab实现DWT、DCT、SVD算法数字图像水印可视化系统+GUI界面+文档说明+详细注释(高分毕业设计)
- NCIAE-Data-Structure大一大二笔记
- 学习wireshark笔记
- digital-image-数据可视化笔记
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
