基于vue 动态加载图片src的解决方法


Posted in Javascript onFebruary 05, 2018

好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些。

首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助

assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖

static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]

根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件

问题来了,用js动态加载assets或者本文件的图片出现404的状态码

代码实例

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./2.png}]
 }
}

跑起来发现图片不显示,错误码为404,

原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png,完整地址为localhost:8080/static/img/[filename].png】

解决办法:

将图片作为模块加载进去,比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]这样webpack就能将其解析。

②将图片放到static目录下,但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来,当然你也可以通过在webpack.base.config.js定义来缩短路径的书写长度。

当然你说当本地图片太多时,这样写岂不是很麻烦,那么其实我们是一这样简化操作的。

第一步:在static里面新建一个json文件夹

基于vue 动态加载图片src的解决方法

第二部:填写json文件,如图

基于vue 动态加载图片src的解决方法

第三部:将json引入响应的vue文件中,解析引用就行了

基于vue 动态加载图片src的解决方法

如有疑问,欢迎进行讨论。

以上这篇基于vue 动态加载图片src的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
详解iframe与frame的区别
Jan 13 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
vue2.0 datepicker使用方法
Feb 04 #Javascript
js数组常用最重要的方法
Feb 04 #Javascript
jQuery Dom元素操作技巧
Feb 04 #jQuery
Vue的事件响应式进度条组件实例详解
Feb 04 #Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 #Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 #Javascript
彻底理解js面向对象之继承
Feb 04 #Javascript
You might like
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
javascript中Function类型详解
2015/04/28 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
python常见数制转换实例分析
2015/05/09 Python
python实现装饰器、描述符
2018/02/28 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
pycharm修改file type方式
2019/11/19 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
python中如何使用insert函数
2020/01/09 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
C语言50道问题
2014/10/23 面试题
公司廉洁自律承诺书
2014/03/27 职场文书
班训口号大全
2014/06/18 职场文书
活动总结报告怎么写
2014/07/03 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android