解决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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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
smarty的保留变量问题
2008/10/23 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
深入浅析javascript函数中with
2018/10/28 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python实现图像全景拼接
2020/03/27 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
个人存款证明书
2014/10/18 职场文书
授权委托书
2015/01/28 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript