基于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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
简单的js分页脚本
2009/05/21 Javascript
input的focus方法使用
2010/03/13 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
机电专业求职信
2014/06/14 职场文书
水电工程师岗位职责
2015/02/13 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
Python读取和写入Excel数据
2022/04/20 Python