解决Vue动态加载本地图片问题


Posted in Javascript onOctober 09, 2019

解决Vue动态加载本地图片问题

解决Vue动态加载本地图片问题

最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来。控制台显示src是有获取到图片地址的,可是就是加载不出来。

最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示。

解决方法:

1.在当前界面全局import图片地址

//使用import引入
import img1 from './img/img1.png'
import img2 from './img/img2.png'

export default {
  data() {
    return {
      imgList[
          {
            id: 0,
            imgUrl: img1
          },
          {
            id: 1,
            imgUrl: img2
          }
          ]
         }
       }
     }

在Html中使用

<img v-for="item in imgList" :key="item.id" :src="imgUrl" />

2.使用require

用第一种方法可能会很繁琐,数据多的时候就不好一个一个import了,此时用require动态加载

getImage() {
  this.imgList.forEach(item => {
    item.imgUrl = require('./img/' + item.name + '.png')
    })
  }

data里的数据(此方法就不用再import啦)

data() {
    return {
      imgList[
          {
            id: 0,
            name: 'img1',
            imgUrl: ''
          },
          {
            id: 1,
            name: 'img2',
            imgUrl: ''
          }
          ]
       }
    }

以上方法就可以解决图片动态绑定后不能显示的问题啦,视频同理哟!

总结

以上所述是小编给大家介绍的解决Vue动态加载本地图片问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
JavaScript面象对象设计
Apr 28 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
原生js写的放大镜效果
Aug 22 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
js中开关变量使用实例
Feb 24 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
Vue3 中的数据侦测的实现
Oct 09 #Javascript
vue3实现v-model原理详解
Oct 09 #Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 #Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 #Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 #Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 #Javascript
js基础之事件捕获与冒泡原理
Oct 09 #Javascript
You might like
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
vue ssr 指南详读
2018/06/29 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
深入理解Python中的内置常量
2017/05/20 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
枚举与#define宏的区别
2014/04/30 面试题
建筑工地门卫岗位职责
2014/04/30 职场文书
雷锋之歌观后感
2015/06/10 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers