Vue图片路径问题(动态引入)

vue项目中我们经常会遇到动态路径的图片无法显示的问题,以下是静态路径和动态路径的常见使用方法。

1.静态路径

在日常的开发中,图片的静态路径通过相对路径和绝对路径的方式引入。

相对路径:以.开头的,例如./、../之类的。就是相对于自己的目标文件的位置。

绝对路径:以/开头的。就是目标文件的真实路径。表示当前站点的根目录。

(1)静态相对路径

<img src="../../assets/1.png" />

<img src="@/assets/1.png" />

(2)静态绝对路径

一般使用public下的资源

public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过webpack。你需要通过绝对路径来引用它们。

<img src="images/1.png" />

<img src="/images/1.png" />

2.动态路径

(1)动态相对路径(使用require)

写在HTML里:

<img :src="require('../../assets/' + imageUrl)" />

或者

写在js里

<img :src="imageUrl" />

imageUrl: require('../../assets/' + this.img)

需要注意:使用require不能直接用变量接收地址,一般采用字符串模板或变量名+空字符串。以下为两种写法:

require(`${url}`); //正确用法

require(url + '')

注意:

以上使用的图片都在项目中,如果要使用本地文件或者服务器文件需要将文件上传到指定文件夹里,在采取以下方式:

F:/file/为上传图片指定路径,后面参数为文件名称

(2)动态绝对路径

与静态引入相同。之所以这样是因为public 目录下的文件不会被编译,部署后可以通过绝对路径获取到。如果还放在原来的 assets 目录中,就会被webpack打包成新的文件夹。

参考文章:百度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL主从架构

1 主从架构解决了什么问题 随着业务的持续增长&#xff0c;单体数据库满足不了业务的需求&#xff0c;可能会出现负载过重&#xff0c;操作数据库速度变慢的情况。为了解决这个问题&#xff0c;数据库一般采用一主一从、一主多从的架构。 为了操作提高效率&#xff0c;减轻压…

sql在线练习

SQLBolt - 学习 SQL - SQL 简介https://sqlbolt.com/拿走不谢&#xff01;&#xff01;&#xff01; UIUC什么乱七八糟的啊

探讨下前端测试的常见场景

前端测试 场景 这边指的测试是指白盒测试&#xff0c;用代码来测试代码。 测试有利于提升代码质量。 代码功能和需求一致。根据需求&#xff0c;写测试。测试通过了&#xff0c;则表明需求实现了。保证代码重构后&#xff0c;未改坏以前的功能。代码重构后&#xff0c;能通过…

一文告诉你样机是什么,分享几个常用的样机模板

一个项目的诞生通常需要经历头脑构思、绘制设计和最终着陆。在这个过程中&#xff0c;样机制作往往是在着陆实践之前进行的。俗话说&#xff1a;“样机使用得好&#xff0c;草稿过早”。样机设计是产品或网站最终设计的生动、静态和视觉表现。它为用户提供了一种模拟现实的方式…

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】 课本里章节里所有蓝色字体的思维导图

【uniapp】短信验证码输入框

需求是短信验证码需要格子输入框 如图 网上找了一个案例改吧改吧 直接上代码 结构 <template><view class"verify-code"><!-- 输入框 --><input id"input" :value"code" class"input" :focus"isFocus"…

数据结构之树(图解)

文章目录 前言一、树是什么&#xff1f;二、树的特点三、树的相关概念四、树的表示方法&#xff08;孩子兄弟表示法&#xff09;总结 前言 在学习完线性结构&#xff0c;例如顺序表、链表、栈、队列后&#xff0c;我们要开始学习一个新的数据结构----树 一、树是什么&#xf…

小白如何在一个月写一篇论文(中文核心,SCI)

小白如何半年发3篇sci的我教你如何快速“水”一篇sci论文_哔哩哔哩_bilibili 计算机视觉&#xff0c;cv领域 半年发3篇sci的我教你如何快速“水”一篇sci论文 计算机视觉(辅导 SCI EI 核心) 微信&#xff1a;whbwqq123或主页加up 小白如何快速写出一篇论文并成功发表&…

Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (二)

这是继上一篇文章 “Elasticsearch&#xff1a;使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation &#xff08;一&#xff09;” 的续篇。在这篇文章中&#xff0c;我主要来讲述 ElasticVectorSearch 的使用。 我们的设置和之前的那篇文章是一样的&#xff…

【C】C语言文件操作

1.为什么使用文件 我们前面学习结构体时&#xff0c;写通讯录的程序&#xff0c;当通讯录运行起来的时候&#xff0c;可以给通讯录中增加、删除数据&#xff0c;此时数据是存放在内存中&#xff0c;当程序退出的时候&#xff0c;通讯录中的数据自然就不存在了&#xff0c;等下…

大彩串口屏读写文件问题

分区 本文使用的是大彩串口屏M系列的&#xff1a; 串口屏内部有三个分区&#xff0c;分别为A、B、C三个区&#xff1a; A区&#xff1a;系统区&#xff0c;存储组态工程文件 B区&#xff1a;数据区&#xff0c;存储配置信息&#xff0c;记录数据、历史曲线等 C区&#xff1a;备…

3.线性神经网络

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 线性回归基础优化算法一、线性回归1、买房案例2、买房模型简化3、线性模型4、神经网络5、损失函数6、训练数据7、参数学习8、显示解9、总结 二、 基础优化算法1、梯度下降2、学习率3、小批量随机梯度下降4、批量大小5、…

docker+playwright

windows10 docker playwright 难点在于windows下docker的安装&#xff0c;以及官方hub被墙的困难。 wsl2 wsl2 ubuntu docker git clone https://gitee.com/lineuman/lcs_playwright.git npm install npx playwright test docker端口怎么映射到主机上面&#xff1f; 设置重…

图、深度优先(DFS)、广度优先(BFS)

图 基本介绍 表示方式 图的创建 from typing import Listclass Graph:vertex_list: List[str] [] # 存储顶点的数组edges: List[list] [] # 存储图中各条边的邻接矩阵num_edges: int 0 # 边的数总数def __init__(self, n: int):"""根据传入的顶点个数初始…

测开(性能测试---LoadRunner)

目录 一、LoadRunner的安装 二、Loadrunner的基本概念 三、开发测试脚本——VUG 3.1 脚本录制 3.2 脚本加强 四、设计场景——Controller LoadRunner是一款开源桌面应用软件&#xff0c;可用来模拟用户负载完成性能测试工作&#xff0c;LoadRunner的功能在版本不断升级的…

JWT详解解读读

&#x1f4d1;前言 本文主要是jwt解读文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&#xff1a;努力一点&#…

WebDAV之π-Disk派盘 + 读出通知

手机各种推销通知太多,如何避免那些繁琐的通知内容,做出一键就能够阅读重要通知的最佳体验,帮助您更加快速和便捷的体验到那些应用内容?推荐大家使用读出通知。 读出通知APP可以设置接收通知的app,还可以用耳机操作,操作简单,你还可以指定播报设备,还有播报的声音的设置…

数据结构 | 顺序表专题

数据结构 | 顺序表专题 文章目录 数据结构 | 顺序表专题课前准备1. 目标2. 需要的储备知识3. 数据结构相关概念 开始顺序表1、顺序表的概念及结构2、顺序表分类3、动态顺序表的实现初始化顺序表顺序表的销毁顺序表的尾插顺序表的头插检查容量顺序表的尾删打印顺序表顺序表的头删…

【递归、搜索与回溯算法】第五节.129. 求根节点到叶节点数字之和和814. 二叉树剪枝

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;递归、搜索与回溯算法 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&am…

.jnlp

首先配置电脑的java环境。 百度搜索jre下载&#xff0c;会有很多结果&#xff0c;一般选择官网进行下载。 下载正确的jre版本。 我的电脑是windows 64位&#xff0c;根据你自己电脑的情况选择版本进行下载。不懂自己电脑是多少位的可以看下一步。 查看电脑是64位还是32…