基于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 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
js实现数字跳动到指定数字
Aug 25 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
2006/12/23 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
python抓取网页中链接的静态图片
2018/01/29 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
django celery redis使用具体实践
2019/04/08 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
简单了解django文件下载方式
2020/02/10 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
学生自我评语大全
2014/04/18 职场文书
迎国庆横幅标语
2014/10/08 职场文书
五年级下册复习计划
2015/01/19 职场文书
事业单位聘任报告
2015/03/02 职场文书