Vue中图片的引用方式的区别详解

更新时间：2025年02月06日 08:55:54 作者：码农研究僧

在 Vue 开发中,图片的引用方式主要取决于图片存放的位置,一般有四种常用的存放方式,本文将详细分析这些方式的区别,并提供完整的代码示例,希望对大家有所帮助

前言

在 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/	直接访问，无需 Webpack 处理	/filename.png	<img src="/manufacturing.png" />
assets/	需要 Webpack 处理	import 或 new URL()	import img from '@/assets/image.png'
远程服务器	图片在外部服务器/CDN	绝对 URL	<img src="https://example.com/image.png" />
动态路由	根据 Vue Router	动态生成图片路径	computed 计算属性 :src=“computedPath”

最佳实践：

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/

存放目录	是否被 Webpack 处理	访问方式	适用场景
public/	❌	否	/filename.png
src/assets/	✅	是	import 或 new URL()

使用 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>

到此这篇关于Vue中图片的引用方式的区别详解的文章就介绍到这了,更多相关Vue图片引用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue之proxyTable代理超全面配置方式
本文作者分享了使用Vue进行代理配置的个人经验,介绍了如何使用proxyTable进行跨域请求配置,并提供了具体的配置文件和使用方法,便于同行参考和学习
2024-10-10
axios封装与传参示例详解
这篇文章主要给大家介绍了关于axios封装与传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue实现滚动条始终悬浮在页面最下方
这篇文章主要为大家详细介绍了vue实现滚动条始终悬浮在页面最下方，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
解决vue中el-date-picker type=daterange日期不回显的问题
这篇文章主要介绍了解决vue中el-date-picker type=daterange日期不回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue.js数据绑定之data属性
这篇文章主要为大家详细介绍了Vue.js数据绑定之data属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue清除浏览器全部cookie的问题及解决方法(绝对有效!)
最近项目要实现关闭浏览器清除用户缓存的功能,下面这篇文章主要给大家介绍了关于vue清除浏览器全部cookie的问题及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vuex 中插件的编写案例解析
Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
Vue中输入框仅支持数字输入的四种方法
项目中需要用到大量的数字输入框限制,为了可以以后能又更多的拓展性,下面这篇文章主要给大家介绍了关于Vue中输入框仅支持数字输入的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08
Vue.js组件通信之自定义事件详解
这篇文章主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
vue3+elementplus基于el-table-v2封装公用table组件详细代码
在日常开发后端管理系统项目中,用于展示数据多会用表格进行展示,下面这篇文章主要给大家介绍了关于vue3+elementplus基于el-table-v2封装公用table组件的相关资料,需要的朋友可以参考下
2023-12-12