vue中引入图片控制台显示Failed to load resource: the server responded with a status of 404 (Not Found)
时间: 2023-11-23 08:57:56 浏览: 170
如何正确解决VuePress本地访问出现资源报错404的问题
在Vue中引入图片需要注意以下几点:
1. 图片路径必须正确,可以使用相对路径或绝对路径。
2. 如果使用相对路径,需要注意相对路径的起点是当前文件所在的目录。
3. 如果使用绝对路径,需要注意路径是否正确。
4. 如果图片路径正确,但是控制台仍然显示Failed to load resource: the server responded with a status of 404 (Not Found),则可能是服务器没有正确地处理图片请求。
以下是一个引入图片的例子:
```html
<template>
<div>
<img :src="imgSrc" alt="example">
</div>
</template>
<script>
export default {
data() {
return {
imgSrc: require('@/assets/example.png')
}
}
}
</script>
<style>
/* 样式 */
</style>
```
其中,@/assets/example.png是相对于当前文件所在的目录的相对路径,如果图片路径不正确,控制台会显示Failed to load resource: the server responded with a status of 404 (Not Found)。
阅读全文