当前位置: 首页 > news >正文

Vue 图片引用方式详解:静态资源与动态路径访问

目录

  • 前言
  • 1. 引用 public/ 目录
  • 2. assets/ 目录
  • 3. 远程服务器
  • 4. Vue Router 动态访问
  • 5. 总结
  • 6. 扩展(图片不显示)

前言

🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF

在 Vue 开发中,图片的引用方式主要取决于图片存放的位置,常见的存放方式包括:

  1. 存放在 public/ 目录
  2. 存放在 assets/ 目录
  3. 存放在远程服务器
  4. 动态拼接图片路径

本文将详细分析这些方式的区别,并提供完整的代码示例和注释

1. 引用 public/ 目录

public/ 目录下的文件会被 Vue 直接映射到项目的根路径 /,无需 Webpack 处理,适用于:

  1. 不会被打包处理的静态资源
  2. 图片 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 进行打包,适用于:

  1. 存放在 src/assets/ 目录
  2. 需要 Webpack 处理,如哈希命名
  3. 图片路径动态变化

✅ 使用 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. 远程服务器

适用场景

  1. 图片存放在 CDN 或外部服务器
  2. 不需要 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”

最佳实践:

  1. public/ 目录适用于静态资源,直接使用 /filename.png 访问
  2. assets/ 目录适用于 Webpack 处理,使用 import 或 new URL()
  3. 外部图片直接使用绝对 URL
  4. 动态图片路径可结合 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 图片引用方式详解:静态资源与动态路径访问

目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展&#xff08;图片不显示&#xff09; 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中&#x…...

chatGPT写的网页版贪吃蛇小游戏

chatGPT写的网页版贪吃蛇小游戏 前言网页版贪吃蛇小游戏 前言 之前无聊&#xff0c;让ChatGPT写了一段基于html语言的贪吃蛇小游戏代码 网页版贪吃蛇小游戏 将以下内容复制到记事本&#xff0c;重命名为xxx.html即可打开浏览器游玩 这里是一个使用HTML、CSS和JavaScript编写…...

Python量化交易助手:xtquant的安装与应用

Python量化交易助手&#xff1a;xtquant的安装与应用 技术背景和应用场景 在量化交易领域&#xff0c;Python因其强大的库支持和灵活性成为了许多开发者的首选语言。其中&#xff0c;xtquant 是迅投官方开发的一个Python包&#xff0c;专门用于与miniqmt通信&#xff0c;实现…...

前缀和算法

文章目录 算法总览题目1371.每个元音包含偶数次的最长子字符串 算法总览 题目 1371.每个元音包含偶数次的最长子字符串 1371.每个元音包含偶数次的最长子字符串 参考博主的讲解 思路分析&#xff1a;就是得使用前缀和记录情况&#xff0c;dp[i][j]表示s[0] 到s[i] 中&…...

Qt常用控件 输入类控件

文章目录 1.QLineEdit1.1 常用属性1.2 常用信号1.3 例子1&#xff0c;录入用户信息1.4 例子2&#xff0c;正则验证手机号1.5 例子3&#xff0c;验证输入的密码1.6 例子4&#xff0c;显示密码 2. QTextEdit2.1 常用属性2.2 常用信号2.3 例子1&#xff0c;获取输入框的内容2.4 例…...

《最小阻力之路》关于愿景的理解和思考

一、愿景的形成机制 1. 愿景的三层来源 来源层级形成机制案例潜在偏差风险① 本能冲动层对快感/痛苦的即时反应"想暴富"源于缺钱焦虑易被短期情绪劫持② 社会镜像层内化外界标准&#xff08;家庭/社会/文化&#xff09;"必须考研"因家人期待混淆他人需求…...

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 初始化步骤&#xff08;各个节点都需执行&#xff09;1.2.1 主机名与IP地址解析1.…...

虚幻基础17:动画层接口

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 animation layer interface animation layer interface 动画层接口&#xff1a;动画图表的集。仅有名字。 添加到动画蓝图中&#xff0c;由动画蓝图实现动画图表。...

无人机PX4飞控 | PX4源码添加自定义uORB消息并保存到日志

PX4源码添加自定义uORB消息并保存到日志 0 前言 PX4的内部通信机制主要依赖于uORB&#xff08;Micro Object Request Broker&#xff09;&#xff0c;这是一种跨进程的通信机制&#xff0c;一种轻量级的中间件&#xff0c;用于在PX4飞控系统的各个模块之间进行高效的数据交换…...

HTMLCSS :下雪了

这段代码创建了一个动态的雪花飘落加载动画&#xff0c;通过 CSS 技术实现了雪花的下落和消失效果&#xff0c;为页面添加了视觉吸引力和动态感。 大家复制代码时&#xff0c;可能会因格式转换出现错乱&#xff0c;导致样式失效。建议先少量复制代码进行测试&#xff0c;若未能…...

如何处理 Typecho Joe 主题被抄袭或盗版的问题

在开源社区中&#xff0c;版权保护是一个非常重要的话题。如果你发现自己的主题&#xff08;如 Joe 主题&#xff09;被其他主题&#xff08;如子比主题&#xff09;抄袭或盗版&#xff0c;你可以采取以下措施来维护自己的权益。 一、确认侵权行为 在采取任何行动之前&#xf…...

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录 一、利用Vue编写一个“Hello World”的定时更新&#xff08;1&#xff09;vue编码在Html文件中&#xff08;2&#xff09;vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 &#xff08;1&#xff…...

volatile变量需要减少读取次数吗

问题说明 本人在前期读Netty源码时看到这样一段源码和注释&#xff1a; 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篇&#xff1a;display 一、什么是 display 属性&#xff1f; display 属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式&#xff0c;还对元素的布局、结构以及与其他元素之间的关系产生重要影响。 二、常用 display 属性值 1. block …...

51单片机 01 LED

一、点亮一个LED 在STC-ISP中单片机型号选择 STC89C52RC/LE52RC&#xff1b;如果没有找到hex文件&#xff08;在objects文件夹下&#xff09;&#xff0c;在keil中options for target-output- 勾选 create hex file。 如果要修改编程 &#xff1a;重新编译-下载/编程-单片机重…...

WPF进阶 | WPF 动画特效揭秘:实现炫酷的界面交互效果

WPF进阶 | WPF 动画特效揭秘&#xff1a;实现炫酷的界面交互效果 前言一、WPF 动画基础概念1.1 什么是 WPF 动画1.2 动画的基本类型1.3 动画的核心元素 二、线性动画详解2.1 DoubleAnimation 的使用2.2 ColorAnimation 实现颜色渐变 三、关键帧动画深入3.1 DoubleAnimationUsin…...

分页按钮功能

前言 在前端开发中&#xff0c;分页功能是一个常见的需求&#xff0c;特别是当需要展示大量数据时&#xff0c;它能有效提升用户体验。该文章结合运用了HTML&#xff0c;CSS&#xff0c;JS实现网页的分页按钮功能&#xff0c;并且可以选择每页显示的条数试试更新总页数及显示当…...

数据分析系列--⑦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 结果汇总 ​​​​​​​ …...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...