vue 动态加载图片src的解决办法

原创 2018年04月17日 16:49:13

最近做项目的时候发现一个问题vue :src本地图片不读取,百度了一下查到了2种解决方法:

方案1: 使用require将图片进入,写法如下

<img :src="require('./faceImg/'+index+'.gif')">

案2:把图片放在static文件夹中,如下

这里写图片描述

<img :src="'../static/faceImg/'+index+'.gif'">

说明下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放可能会变动的文件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/keji_123/article/details/79977210

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1394

vue动态加载图片

写vue轮播,需要加载图片,直接把图片写进勒data,发现加载出来是字符串,故而查询资料,解决此问题 把图片放在static中,可以正常加载,如果图片再assets中就只能引入,至于为什么,,,,我...
  • weixin_40605689
  • weixin_40605689
  • 2018-01-31 16:24:58
  • 240

vue中如何动态的绑定图片,vue中通过data返回图片路径

在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据。 因此在data中必须用require加载,否则会当成字符串来处理。...
  • fairyier
  • fairyier
  • 2017-04-27 11:28:37
  • 7121

Vue.js 动态为img的src赋值

需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ ...
  • ycs0501
  • ycs0501
  • 2017-09-04 09:40:57
  • 3101

vue中如何动态的绑定图片

在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据。 因此在data中必须用require加载,否则会当成字符串来处理。...
  • k491022087
  • k491022087
  • 2017-04-09 13:28:47
  • 5918

Vue用v-for给src属性赋值

我的代码结构如下面代码所示,无法执行,在img中的src属性中无法用mustache表示法 new Vue({ el: "#test", data...
  • grape875499765
  • grape875499765
  • 2017-08-07 14:59:05
  • 4841

Vue.js 图片不显示 | 图片资引用 | img src 路径出错

Vue.js 图片不显示 | 图片资引用 | img src 路径出错
  • wlonging
  • wlonging
  • 2017-03-29 18:48:05
  • 17976

JS 动态加载 CSS 文件和JS文件,加载图片

实现功能的js代码。var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ ...
  • u013410747
  • u013410747
  • 2015-11-24 22:04:56
  • 1639

webpack,vue,图片(懒加载)之间关系

webpack,vue,图片(懒加载)之间关系
  • Zhooson
  • Zhooson
  • 2017-10-09 19:59:33
  • 305

vue不起作用是vue版本问题 img src路径

1、主要vue版本问题
  • webZRH
  • webZRH
  • 2017-10-25 11:03:41
  • 306
收藏助手
不良信息举报
您举报文章:vue 动态加载图片src的解决办法
举报原因:
原因补充:

(最多只允许输入30个字)