目录
前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展（图片不显示）前言
在 Vue 开发中，图片的引用方式主要取决于图片存放的位置，常见的存放方式包括：
存放在 public/ 目录存放在 assets/ 目录存放在远程服务器动态拼接图片路径本文将详细分析这些方式的区别，并提供完整的代码示例和注释
1. 引用 public/ 目录
public/ 目录下的文件会被 Vue 直接映射到项目的根路径 /，无需 Webpack 处理，适用于：
不会被打包处理的静态资源图片 URL 确定，不依赖 Webpack 解析正确写法
<template> <div> <!-- 直接从 public 目录访问图片 --> <img src="/manufacturing.png" alt="Manufacturing Image" /> </div></template>
错误写法
<template> <div> <!-- public 目录不需要 public/ 前缀 --> <img src="/public/manufacturing.png" alt="Error Image" /> </div></template>
说明： public/ 目录的内容会被 Vue 直接映射到根路径 /，所以访问 /public/xxx.png 是错误的
截图如下：
2. assets/ 目录
适用场景
assets/ 目录下的图片会被 Vue 通过 Webpack 进行打包，适用于：
存放在 src/assets/ 目录需要 Webpack 处理，如哈希命名图片路径动态变化使用 import 方式
<script setup>import imageUrl from '@/assets/images/manufacturing.png'</script><template> <div> <img :src="imageUrl" alt="Manufacturing Image" /> </div></template>
说明：
import 方式会将图片路径解析为 Webpack 处理的 URL
适用于静态导入，但不适用于动态路径拼接
使用 new URL() 方式
<script setup>const imageSrc = new URL('@/assets/images/manufacturing.png', import.meta.url).href</script><template> <div> <img :src="imageSrc" alt="Manufacturing Image" /> </div></template>说明：
new URL() 适用于 assets 目录，支持动态路径处理
3. 远程服务器
适用场景
图片存放在 CDN 或外部服务器不需要 Webpack 处理<template> <div> <img src="https://example.com/images/manufacturing.png" alt="Remote Image" /> </div></template>
说明：
直接使用绝对 URL 访问远程图片，无需 Vue 处理
4. Vue Router 动态访问
图片名称与路由路径相关联，可以使用 computed 计算属性自动生成图片路径
<template> <div> <img :src="imageSrc" alt="Dynamic Page Image" /> </div></template><script setup>import { useRoute } from 'vue-router'import { computed } from 'vue'const route = useRoute()// 计算 public 目录下的图片路径const imageSrc = computed(() => { const sanitizedPath = route.path.replace(/^\//, '') // 移除开头的 `/` return `/${sanitizedPath}.png` // 访问 public 目录})</script>假设 public 目录结构如下：
public/
├── home.png
├── about.png
├── contact.png
访问 /home 时，图片路径为：
<img src="/home.png" />
动态路由的方式有所差异：
<template> <div> <img :src="imageSrc" alt="Dynamic Page Image" /> </div></template><script setup>import { useRoute } from 'vue-router'import { computed } from 'vue'const route = useRoute()// 计算 public 目录下的图片路径const imageSrc = computed(() => { const sanitizedPath = route.path.replace(/^\//, '') // 移除开头的 `/` const lastSegment = sanitizedPath.split('/').pop() // 获取最后的路径部分 return `/${lastSegment}.png` // 访问 public 目录})</script>截图如下：
5. 总结
总的来说：
最佳实践：
public/ 目录适用于静态资源，直接使用 /filename.png 访问assets/ 目录适用于 Webpack 处理，使用 import 或 new URL()外部图片直接使用绝对 URL动态图片路径可结合 Vue Router 计算生成6. 扩展（图片不显示）
图片无法显示通常是路径错误、资源未正确加载或 Webpack/Vite 处理导致的问题
图片不显示的常见原因
在 Vue 3 + Vite（或 Webpack）项目中，图片可能无法显示的常见原因包括：
1.路径错误：引用 public/ 目录时仍加 public/ 前缀
2.资源未正确加载：如 src/assets/ 目录下的图片未被 Webpack 处理
3.动态路径问题：使用 computed 计算属性拼接路径时错误
4.Webpack 处理方式：assets/ 目录下的图片会被 Webpack 处理，不能直接访问
5.图片格式或大小问题：浏览器不支持的图片格式或图片损坏
路径错误这个要点此处着重分析下
详细分析下为何要放在public等路径下！
public/ 目录的映射机制
在 Vue 项目结构中：
my-project/
├── public/
│ ├── manufacturing.png
│ ├── images/
│ │ ├── factory.png
├── src/
│ ├── views/
│ │ ├── Industry.vue
│ ├── assets/
│ │ ├── example.png
│ ├── App.vue
public/manufacturing.png 在构建后会被 Vue 直接映射到：/manufacturing.png
public/images/factory.png 在构建后会变成：/images/factory.png
src/assets/example.png 则会被 Webpack 处理，并生成动态路径（如 /assets/example.abcdef.png）
如何证明 public/ 目录直接映射到根路径 /？
可以打开 http://localhost:5173/manufacturing.png，如果 manufacturing.png 直接显示，则说明它已经被映射到根目录 /，而不需要 /public/manufacturing.png
对比 public/ 和 src/assets/
使用 public/ 目录
<template> <div> <img src="/manufacturing.png" alt="Manufacturing Image" /> </div></template>
使用 src/assets/ 目录
<script setup>import imgUrl from '@/assets/example.png'</script><template> <div> <img :src="imgUrl" alt="Example Image" /> </div></template>
