vue动态显示图片报错404的解决
更新时间：2024年07月25日 08:43:19 作者：liuxi_happy
这篇文章主要介绍了vue动态显示图片报错404的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue动态显示图片报错404
<img :src="image"/>
当我们动态加载图片的时候会出现如下图错误
1.第一种可能，是你写了相对路径引起的，你需要写绝对路径
image:'../assets/image/top10-1.png' 你需要改成具体路径 image:'/src/assets/images/top10-1.png'
2.第二种解决方式你要使用require()
<img :src="require(images)"/>
3.第三种解决方式把图片放在public目录下面，但是这样虽然解决了问题，使用webpack打包的时候不会把这里面的文件打包进去。
4.如果你使用了ts 那么就无法使用require(),你可以使用import 把你的图片路径作为一个模块引进来使用
<template>
<img :src="images"/>
</template>
<script>
import image from '../assets/image/top10-1.png'
export default{
data(){
return {
images:image
}
}
}
</script>
vue.js图片不显示 | 图片资引用 | img src 路径出错
最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。
解决方法
方案1：使用require将图片进入
写法如下：
logo: require('../asset/admin/logo.png')然后再模板中：
<img :src="logo">
就可以了。
方案2：把图片放在static文件夹中
如下所示：
然后再data里面直接这样写
logo: '../static/images/logo.png'
就可以直接使用了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue+Java+Base64实现条码解析的示例，帮助大家实现条码解析，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了vue 需求 data中的数据之间的调用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文通过实例代码给大家介绍了Vue.js实现按钮的动态绑定效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
这篇文章主要介绍了如何区分vue中的v-show 与 v-if ，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-09-09
在Vue中，动画效果是非常有用的，它可以使用户界面变得更加生动、有趣，本文中我们将学习如何在Vue中进行自定义动画与动画效果设计，感兴趣的可以了解一下2023-06-06
vue中axios的get请求和post请求的传参方式、拦截器示例代码
Post是向服务器提交数据的一种请求,get是向服务器发索取数据的一种请求,post在真正接受数据之前会先将请求头发送给服务器进行确认,然后才真正发送数据,本文给大家介绍vue中axios的get请求和post请求的传参方式、拦截器示例代码,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了在Vue中使用mockjs代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了Vue实现一种简单的无限循环滚动动画的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章给大家详细介绍了Vue强制组件重新渲染的正确方法,非常的实用,有需要的小伙伴可以参考下2020-02-02
这篇文章主要介绍了Vue提示框组件vue-notification使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
最新评论