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

 更新时间:2019年11月12日 17:56:08   作者:枫丿慕  
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

<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'
  }
  }
}  

报错信息:

修改代码如下: 修改内容为 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',
    }
  }
}

效果如下:

图片添加src时:

第一种:

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


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

报错如下:

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

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')]
    }
  }
}

结果为:

第二种:

当我们需要在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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue前端框架—Mint UI详解(更适用于移动端)

    vue前端框架—Mint UI详解(更适用于移动端)

    这篇文章主要介绍了vue前端框架—Mint UI的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue和react中props变化后如何修改state

    vue和react中props变化后如何修改state

    这篇文章主要介绍了vue和react中props变化后如何修改state,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vuedraggable+element ui实现页面控件拖拽排序效果

    vuedraggable+element ui实现页面控件拖拽排序效果

    这篇文章主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 使用vue实现多规格选择实例(SKU)

    使用vue实现多规格选择实例(SKU)

    这篇文章主要介绍了使用vue实现多规格选择实例(SKU),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue中使用Element的Table组件实现嵌套表格

    Vue中使用Element的Table组件实现嵌套表格

    本文主要介绍了Vue中使用Element的Table组件实现嵌套表格,通过type="expand"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容,感兴趣的可以了解一下
    2024-01-01
  • Vue express鉴权零基础入门

    Vue express鉴权零基础入门

    这篇文章主要介绍了详解express鉴权,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 使用konva和vue-konva库实现拖拽滑块验证功能

    使用konva和vue-konva库实现拖拽滑块验证功能

    这篇文章主要介绍了使用konva和vue-konva完成前端拖拽滑块验证功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Element表格表头行高问题解决

    Element表格表头行高问题解决

    在最近一个项目的后台管理系统中,写前端界面时用到了ElementUI,但是发现导入数据表格之后表头的高度一直很高,那么如何解决,本文就来详细的介绍一下
    2021-09-09
  • vue中怎样让函数只执行一次

    vue中怎样让函数只执行一次

    这篇文章主要介绍了vue中怎样让函数只执行一次问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue的elementUI实现自定义主题方法

    Vue的elementUI实现自定义主题方法

    下面小编就为大家分享一篇Vue的elementUI实现自定义主题方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论