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

前端开发攻略---三种方法解决Vue3图片动态引入问题

目录

 1、将图片放入public文件夹中

 2、使用 /src/.... 路径开头

 3、生成图片的完整URL地址(推荐)


 1、将图片放入public文件夹中

使用图片:路径为 '/public'  开头

<template><div><img :src="`/public/${flag ? '01' : '02'}.jpg`" alt="" /><button @click="flag = !flag">动态切换图片</button></div></template><script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
</script><style scoped>
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
</style>

2、使用 /src/.... 路径开头

图片位置位于 src 目录下

可以使用  '/src/...'  动态引入图片

<template><div><img :src="`/src/assets/images/${flag ? '01' : '02'}.jpg`" alt="" /><button @click="flag = !flag">动态切换图片</button></div>
</template><script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
</script><style scoped>
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
</style>

致命问题:使用这种方式本地看起来很正常,但是部署到生产环境图片就加载不出了,因为打包后路径出现了问题

 3、生成图片的完整URL地址(推荐)

图片位置位于 src 目录下

通过手写 getImageUrl函数 动态生成图片URL地址

<template><div><img :src="getImageUrl(flag ? '01.jpg' : '02.jpg')" alt="" /><button @click="flag = !flag">动态切换图片</button></div>
</template><script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)function getImageUrl(url) {const path = new URL(`./assets/images/${url}`, import.meta.url)return path.href
}
</script><style scoped>
img {width: 500px;height: 500px;vertical-align: middle;
}
button {width: 100px;height: 50px;
}
</style>

注意:getImageUrl函数中使用的地址是相对位置的地址

该函数位于 App.vue 文件中  所以 getImageUrl函数 中的地址是 ./assets/....

当该函数所处的文件地址变化时,找图片的地址也要相对发生变化

解释一下getImageUrl函数中代码的作用和意思

作用:

这个函数是用来获取图片的 URL 地址的。它接受一个参数 url,然后使用 new URL() 构造函数创建一个新的 URL 对象,其中包含了 ./assets/images/ 目录下的图片路径。在这个路径中,url 参数用于指定具体的图片文件名或路径。最后,通过 path.href 返回完整的 URL 地址。

意思:

1、new URL() 构造函数创建了一个新的 URL 对象。

2、这个 URL 对象的第一个参数是一个字符串,表示相对路径 ./assets/images/,这里假设这是图片文件存放的目录。

3、第二个参数 import.meta.url 是 Node.js 中的一个特殊变量,它指向当前模块文件的 URL 地址。

4、函数将传入的 url 参数附加到 ./assets/images/ 路径后面,得到了完整的图片路径。

5、最后,通过 path.href 返回这个完整的图片 URL 地址。

相关文章:

前端开发攻略---三种方法解决Vue3图片动态引入问题

目录 1、将图片放入public文件夹中 2、使用 /src/.... 路径开头 3、生成图片的完整URL地址&#xff08;推荐&#xff09; 1、将图片放入public文件夹中 使用图片&#xff1a;路径为 /public 开头 <template><div><img :src"/public/${flag ? 01 : 02}.jp…...

零售EDI:Target DVS EDI项目案例

Target塔吉特是美国一家巨型折扣零售百货集团&#xff0c;与全球供应商建立长远深入的合作关系&#xff0c;目前国内越来越多的零售产品供应商计划入驻Target。完成入驻资格审查之后&#xff0c;Target会向供应商提出EDI对接邀请&#xff0c;企业需要根据指示完成供应商EDI信息…...

AWS安全性身份和合规性之AWS Firewall Manager

AWS Firewall Manager是一项安全管理服务&#xff0c;可让您在AWS Organizations中跨账户和应用程序集中配置和管理防火墙规则。在创建新应用程序时&#xff0c;您可以借助Firewall Manager实施一套通用的安全规则&#xff0c;更轻松地让新应用程序和资源从一开始就达到合规要求…...

R实验 随机变量及其分布

实验目的&#xff1a; 掌握常见几种离散性随机变量及其分布在R语言中对应的函数用法&#xff1b;掌握常见几种连续性随机变量及其分布在R语言中对应的函数用法&#xff1b;掌握统计量的定义及统计三大抽样分布在R语言中对应的函数用法。 实验内容&#xff1a; &#xff08;习题…...

rapidssl泛域名https600元一年

泛域名https证书也可以称之为通配符https证书&#xff0c;指的是可以用一张https证书为多个网站(主域名以及主域名下的所有子域名网站)传输数据加密&#xff0c;并且提供身份认证服务的数字证书产品。RapidSSL旗下的泛域名https证书性价比高&#xff0c;申请速度快&#xff0c;…...

月薪5万是怎样谈的?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测技术社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;目前是晶圆厂的PE&#xff0c;但是想跳槽谈了几次薪水&#xff0c;都没法有大幅度的增长&#xff0c;该怎么办&#xff1f;“学得文武…...

linux下宝塔负载100%解决方法

今天发现服务器宝塔面板负载居然是100% 但是cpu 和内存其实并不高 通过命令查看主机 uptime 中load average 居然高达18.23 看来负载是真的高了 通过vmstat 看看具体问题 procs&#xff1a; ​ r 表示运行和等待CPU时间片的进程数&#xff0c;这个值如果长期大于系统CPU个数…...

【C++】STL快速入门基础

文章目录 STL&#xff08;Standard Template Library&#xff09;1、一般介绍2、STL的六大组件2.1、STL容器2.2、STL迭代器2.3、相关容器的函数vectorpairstringqueuepriority_queuestackdequeset, map, multiset, multimapunordered_set, unordered_map, unordered_multiset, …...

面向对象编程的魅力与实战:以坦克飞机大战为例

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、面向对象编程的引言 二、理解面向对象编程与面向过程编程的差异 三、创建类与对象&…...

二叉树——堆的实现

一.前言 前面我们讲解了二叉树的概念以及二叉树的存储结构&#xff1a;https://blog.csdn.net/yiqingaa/article/details/139224974?spm1001.2014.3001.5502 今天我们主要讲讲二叉树的存储结构&#xff0c;以及堆的实现。 二.正文 1.二叉树的顺序结构及实现 1.1二叉树的顺序…...

【Spring】DynamicDataSourceHolder 动态数据源切换

【Spring】DynamicDataSourceHolder 动态数据源切换 常见场景常见工具一、AbstractRoutingDataSource1.1、 定义 DynamicDataSourceHolder1.2、 配置动态数据源1.3、 在Spring配置中定义数据源1.4、在业务代码中切换数据源 二、Dynamic Datasource for Spring Boot2.1. 添加依赖…...

LeeCode 3165 线段树

题意 传送门 LeeCode 3165 不包含相邻元素的子序列的最大和 题解 考虑不含相邻子序列的最大和&#xff0c;在不带修改的情况下容易想到&#xff0c;以最后一个元素是否被选取为状态进行DP。从线性递推的角度难以处理待修改的情况。 从分治的角度考虑&#xff0c;使用线段树…...

修改元组元素

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 场景模拟&#xff1a;伊米咖啡馆&#xff0c;由于麝香猫咖啡需求量较大&#xff0c;库存不足&#xff0c;店长想把它换成拿铁咖啡。 实例08 将麝香猫…...

【模版方法设计模式】

文章目录 模板方法设计模式模板方法的设计原则模板方法设计模式组成部分代码实现抽象类实现具体实现类执行 模板方法设计模式 模版方法设计模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法骨架&#xff0c;而将一…...

rust语言初识

程序设计实践课上水一篇ing 来源&#xff1a;rust基础入门-1.初识rust-酷程网 (kucoding.com) rust作为一名新兴语言&#xff0c;与go又有些许不同&#xff0c;因为它的目标是对标系统级开发&#xff0c;也就是C、C这两位在编程界的位置。比如我们最常用的windows系统&#x…...

知识图谱数据预处理笔记

知识图谱数据预处理笔记 0. 引言1. 笔记1-1. \的转义1-2. 特殊符号的清理1-3. 检查结尾是否正常1-4. 检查<>是否存在1-5. 两端空格的清理1-6. 检查object内容长时是否以<开始 0. 引言 最近学习知识图谱&#xff0c;发现数据有很多问题&#xff0c;这篇笔记记录遇到的…...

Unity面试八股文之基础篇

文章目录 前言1. Unity的生命周期加载第一个场景Editor在第一次帧更新之前帧之间更新顺序协程销毁对象时退出时 2. Unity 协程和线程,进程的区别3. 本地坐标系 世界坐标系4. 碰撞器和触发器的区别后话 前言 开设这个栏目的博文会写一些有关unity的面试题目&#xff0c;在面试的…...

HTTPS能否避免流量劫持?如何实现HTTPS

在当今数字化时代&#xff0c;网站安全已经成为企业和个人的头等大事。随着网络犯罪和数据泄露的增加&#xff0c;保护您的网站免受潜在威胁比以往任何时候都更加重要。网站安全的一个关键组成部分是HTTPS&#xff0c;它代表着安全的超文本传输协议。HTTPS是标准HTTP协议的安全…...

簡述Vue 2.0 响应式数据的原理

Vue 2.0 响应式数据的原理主要基于以下几个关键点&#xff1a; 数据劫持与Object.defineProperty&#xff1a; Vue 2.0 使用 Object.defineProperty 方法来劫持对象的属性&#xff0c;为其添加 getter 和 setter 方法。当数据被访问或修改时&#xff0c;这些 getter 和 setter …...

Kafka线上集群部署方案怎么做?no.6

专栏前面几期内容&#xff0c;我分别从Kafka的定位、版本的变迁以及功能的演进等几个方面循序渐进地梳理了Apache Kafka的发展脉络。通过这些内容&#xff0c;我希望你能清晰地了解Kafka是用来做什么的&#xff0c;以及在实际生产环境中该如何选择Kafka版本&#xff0c;更快地帮…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

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

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

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...