基于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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
根德YB400的电路分析
2021/03/02 无线电
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python中return如何写
2020/06/18 Python
办公室助理岗位职责
2013/12/25 职场文书
护理职业生涯规划书
2014/01/24 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
道歉短信大全
2015/05/12 职场文书