当前位置: 首页 > 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 结果汇总 ​​​​​​​ …...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...