解决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实现监听数值的变化,并捕捉到

    vue实现监听数值的变化,并捕捉到

    这篇文章主要介绍了vue实现监听数值的变化,并捕捉到问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue2和vue3实现图片懒加载方式

    vue2和vue3实现图片懒加载方式

    这篇文章主要介绍了vue2和vue3实现图片懒加载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue+Element使用富文本编辑器的示例代码

    Vue+Element使用富文本编辑器的示例代码

    本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue axios post发送复杂对象问题

    vue axios post发送复杂对象问题

    现在vue项目中,一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下
    2019-06-06
  • vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决(两种解决方法)

    vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决(两种解决方法)

    这篇文章主要介绍了vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决,本文给大家分享两种解决方法,需要的朋友可以参考下
    2023-05-05
  • vue-cli+webpack记事本项目创建

    vue-cli+webpack记事本项目创建

    这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue Validate表单组件的封装详解

    Vue Validate表单组件的封装详解

    这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下
    2023-09-09
  • Vue-路由导航菜单栏的高亮设置方法

    Vue-路由导航菜单栏的高亮设置方法

    下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue组件实现景深卡片轮播示例

    Vue组件实现景深卡片轮播示例

    这篇文章主要为大家介绍了Vue组件实现景深卡片轮播示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue中nextTick的原理分析

    Vue中nextTick的原理分析

    本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能
    2025-02-02

最新评论