解决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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
vue二级路由设置方法
2018/02/09 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python中变量交换的例子
2014/08/25 Python
python获取本机外网ip的方法
2015/04/15 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python生成二维码的实例详解
2017/10/29 Python
《Python学习手册》学习总结
2018/01/17 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python3实现飞机大战游戏
2020/04/24 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
2015学校年度工作总结
2015/05/11 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书