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 结果汇总 …...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)
参考官方文档:https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java(供 Kotlin 使用) 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
