【Vue 踩坑】本地静态图片加载失败问题

最新推荐文章于 2025-03-15 00:00:00 发布

原创最新推荐文章于 2025-03-15 00:00:00 发布 · 2.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端专栏收录该内容

5 篇文章

订阅专栏

在Vue项目中，使用动态绑定的本地图片URL导致加载失败。问题源于浏览器解析时将根域名作为相对路径的起点，而非项目根目录。通过将图片移至static文件夹解决了这个问题，但带来了图片资源优化的挑战，考虑采用文章中提及的优化策略。

问题描述

使用原生img标签，src用v-bind动态绑定本地的url，由于图片放在了assets文件夹下，所以代码大致长这样：

<template>
	<img :src="url">
</template>

<script>
	//...
	data() {
		return {
			url: "../assets/charts.jpg"
		}
	}
</script>

但打开浏览器看效果时却发现图片加载失败
遂谷歌

解决方案

这篇文章（https://www.cnblogs.com/ranyonsue/p/11608760.html）说得比较详细，主要是我们写的相对路径是相对于项目的根目录，而浏览器解析时会把根域名作为相对路径的根目录，所以图片才会加载失败。
采用文章中提到的方法，把图片放到了static文件夹下，就加载成功了。
不过这个带来的图片资源优化问题后续还需要解决，所以之后会尝试一下文章中提到的第三种方法。