欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 动态显示图片报错 404

程序员文章站 2024-01-02 13:51:16
...
<img :src="image"/>

当我们动态加载图片的时候会出现如下图错误
vue 动态显示图片报错 404
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>

上一篇:

下一篇: