Vue 图片引用方式详解:静态资源与动态路径访问
目录
- 前言
- 1. 引用 public/ 目录
- 2. assets/ 目录
- 3. 远程服务器
- 4. Vue Router 动态访问
- 5. 总结
- 6. 扩展(图片不显示)
前言
🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF
在 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)项目中,图片可能无法显示的常见原因包括:
- 路径错误:引用 public/ 目录时仍加 public/ 前缀
- 资源未正确加载:如 src/assets/ 目录下的图片未被 Webpack 处理
- 动态路径问题:使用 computed 计算属性拼接路径时错误
- Webpack 处理方式:assets/ 目录下的图片会被 Webpack 处理,不能直接访问
- 图片格式或大小问题:浏览器不支持的图片格式或图片损坏
路径错误这个要点此处着重分析下
详细分析下为何要放在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 图片引用方式详解:静态资源与动态路径访问
目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展(图片不显示) 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中&#x…...
chatGPT写的网页版贪吃蛇小游戏
chatGPT写的网页版贪吃蛇小游戏 前言网页版贪吃蛇小游戏 前言 之前无聊,让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码 网页版贪吃蛇小游戏 将以下内容复制到记事本,重命名为xxx.html即可打开浏览器游玩 这里是一个使用HTML、CSS和JavaScript编写…...
Python量化交易助手:xtquant的安装与应用
Python量化交易助手:xtquant的安装与应用 技术背景和应用场景 在量化交易领域,Python因其强大的库支持和灵活性成为了许多开发者的首选语言。其中,xtquant 是迅投官方开发的一个Python包,专门用于与miniqmt通信,实现…...
前缀和算法
文章目录 算法总览题目1371.每个元音包含偶数次的最长子字符串 算法总览 题目 1371.每个元音包含偶数次的最长子字符串 1371.每个元音包含偶数次的最长子字符串 参考博主的讲解 思路分析:就是得使用前缀和记录情况,dp[i][j]表示s[0] 到s[i] 中&…...
Qt常用控件 输入类控件
文章目录 1.QLineEdit1.1 常用属性1.2 常用信号1.3 例子1,录入用户信息1.4 例子2,正则验证手机号1.5 例子3,验证输入的密码1.6 例子4,显示密码 2. QTextEdit2.1 常用属性2.2 常用信号2.3 例子1,获取输入框的内容2.4 例…...
《最小阻力之路》关于愿景的理解和思考
一、愿景的形成机制 1. 愿景的三层来源 来源层级形成机制案例潜在偏差风险① 本能冲动层对快感/痛苦的即时反应"想暴富"源于缺钱焦虑易被短期情绪劫持② 社会镜像层内化外界标准(家庭/社会/文化)"必须考研"因家人期待混淆他人需求…...
Ubuntu 22.04系统安装部署Kubernetes v1.29.13集群
Ubuntu 22.04系统安装部署Kubernetes v1.29.13集群 简介Kubernetes 的工作流程概述Kubernetes v1.29.13 版本Ubuntu 22.04 系统安装部署 Kubernetes v1.29.13 集群 1 环境准备1.1 集群IP规划1.2 初始化步骤(各个节点都需执行)1.2.1 主机名与IP地址解析1.…...
虚幻基础17:动画层接口
能帮到你的话,就给个赞吧 😘 文章目录 animation layer interface animation layer interface 动画层接口:动画图表的集。仅有名字。 添加到动画蓝图中,由动画蓝图实现动画图表。...
无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志
PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB(Micro Object Request Broker),这是一种跨进程的通信机制,一种轻量级的中间件,用于在PX4飞控系统的各个模块之间进行高效的数据交换…...
HTMLCSS :下雪了
这段代码创建了一个动态的雪花飘落加载动画,通过 CSS 技术实现了雪花的下落和消失效果,为页面添加了视觉吸引力和动态感。 大家复制代码时,可能会因格式转换出现错乱,导致样式失效。建议先少量复制代码进行测试,若未能…...
如何处理 Typecho Joe 主题被抄袭或盗版的问题
在开源社区中,版权保护是一个非常重要的话题。如果你发现自己的主题(如 Joe 主题)被其他主题(如子比主题)抄袭或盗版,你可以采取以下措施来维护自己的权益。 一、确认侵权行为 在采取任何行动之前…...
利用Vue和javascript分别编写一个“Hello World”的定时更新
目录 一、利用Vue编写一个“Hello World”的定时更新(1)vue编码在Html文件中(2)vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 (1ÿ…...
volatile变量需要减少读取次数吗
问题说明 本人在前期读Netty源码时看到这样一段源码和注释: private boolean invokeHandler() {// Store in local variable to reduce volatile reads.int handlerState this.handlerState;return handlerState ADD_COMPLETE || (!ordered && handlerS…...
bootstrap.yml文件未自动加载问题解决方案
在添加bootstrap.yml文件后,程序未自动扫描到,即图标是这样的: 查了一些资料,是缺少bootstrap相关依赖,虽然已经添加了spring-cloud-context依赖,但是这个依赖并未引入bootstrap依赖,可能是版本问题,需要手动引入 <dependency><groupId>org.springframework.cloud&…...
编程AI深度实战:AI编程工具哪个好? Copilot vs Cursor vs Cody vs Supermaven vs Aider
系列文章: 编程AI深度实战:私有模型deep seek r1,必会ollama-CSDN博客 编程AI深度实战:自己的AI,必会LangChain-CSDN博客 编程AI深度实战:给vim装上AI-CSDN博客 编程AI深度实战:火的编程AI,都在用语法树(AST)-CSDN博客 编程AI深度实战:让verilog不再是 AI …...
前端知识速记--CSS篇:display
前端知识速记–CSS篇:display 一、什么是 display 属性? display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式,还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...
51单片机 01 LED
一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC;如果没有找到hex文件(在objects文件夹下),在keil中options for target-output- 勾选 create hex file。 如果要修改编程 :重新编译-下载/编程-单片机重…...
WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果
WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...
分页按钮功能
前言 在前端开发中,分页功能是一个常见的需求,特别是当需要展示大量数据时,它能有效提升用户体验。该文章结合运用了HTML,CSS,JS实现网页的分页按钮功能,并且可以选择每页显示的条数试试更新总页数及显示当…...
数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)
一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 2.2.3 结果汇总 …...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
