解决vue v-for src 图片路径问题 404


Posted in Javascript onNovember 12, 2019

我的代码结构如下所示不能执行,会出现报错

<RadioGroup v-model="animal">
  <Radio v-for='a in radio_arr' label={{a}}></Radio>
</RadioGroup>



export default {
  data(){
  return{
    radio_arr:['循环1','循环2','循环3'],
        animal:'循环2'
  }
  }
}

报错信息:

解决vue v-for src 图片路径问题 404

修改代码如下: 修改内容为 label={{a}} 修改为 :label='a'

<RadioGroup v-model="animal">
  <Radio v-for='a in radio_arr' :label='a'></Radio>
</RadioGroup>

export default {
  data(){
    return{
      radio_arr:['循环1','循环2','循环3'],
      animal:'循环2',
    }
  }
}

效果如下:

解决vue v-for src 图片路径问题 404

图片添加src时:

第一种:

<img v-for='url in imgurl' :src='url' />


export default {
  data(){
    return{
            imgurl:['../assets/img/icon1.png' ,
                     '../assets/img/icon2.png']   
          }
    }
}

报错如下:

解决vue v-for src 图片路径问题 404

修改之后的代码: 修改内容为:

imgurl:['../assets/img/icon1.png' , '../assets/img/icon2.png']

修改为

imgurl:[require('../assets/img/icon1.png') ,require('../assets/img/icon2.png')]
 

<img v-for='url in imgurl' :src='url' />


export default {
  data(){
    return{
      imgurl:[require('../assets/img/icon1.png') 
                 ,require('../assets/img/icon2.png')]
    }
  }
}

结果为:

解决vue v-for src 图片路径问题 404

第二种:

当我们需要在js代码里面写图片路径的时候,如果我们在data里面写

/*错误写法*/
imgUrl:'../assets/logo.png'

此时webpack只会把它当做字符串处理从而找不到图片地址,此时我们可以使用import引入图片路径:

<img :src="avatar" />
import avatar from '@/assets/logo.png'

在data里面定义

avatar: avatar

第三种:

我们也可以把图片放在外层的static文件夹里面,然后在data里面定义:

imgUrl : '../../static/logo.png'
<img :src="imgUrl" />

以上这篇解决vue v-for src 图片路径问题 404就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证手机号码的JS方法分享
Sep 10 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 #Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 #Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 #Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 #Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 #Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 #Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
简单了解python的break、continue、pass
2019/07/08 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python面向对象实现方法总结
2020/08/12 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
什么是Smart Navigation?
2016/07/03 面试题
健康教育评估方案
2014/05/25 职场文书
教师培训简讯
2015/07/20 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python