解决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 相关文章推荐
Tips 带三角可关闭的文字提示
Oct 06 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
numpy中索引和切片详解
2017/12/15 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python文件拆分与重组实例
2018/12/10 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
python 调用Google翻译接口的方法
2020/12/09 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
旅行社各个岗位职责
2014/03/15 职场文书
党员创先争优承诺书
2014/03/26 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
商铺门面租房协议书
2014/10/21 职场文书
运动会报道稿大全
2015/07/23 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP