解决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 相关文章推荐
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
js实现搜索提示框效果
Sep 05 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
实现树状结构的两种方法
2006/10/09 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
document.compatMode介绍
2009/05/21 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python itertools模块详解
2015/05/09 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
关于nginx 实现jira反向代理的问题
2021/09/25 Servers