解决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 相关文章推荐
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
Javascript实现打鼓效果
Jan 29 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
php无限极分类递归排序实现方法
2014/11/11 PHP
php读取csc文件并输出
2015/05/21 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
基于input动态模糊查询的实现方法
2017/12/12 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python获取邮件地址的方法
2015/07/10 Python
python发送邮件实例分享
2017/07/28 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python快排算法详解
2019/03/04 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
挂职思想汇报
2013/12/31 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
餐厅总厨求职信
2014/03/04 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
召开会议通知范文
2015/04/15 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers