Vue3 动态获取 assets 文件夹图片

我真服了Vue3 这个老六了,一个简单图片src 赋值搞得那么复杂.

 //item.type 是我遍历类型的类型参数
<img alt="吐槽大会" :src="getAssetUrl(item.type)" />

基于 Vue2 的Webpack 处理,还不错,可以用@/ 这种绝对路径,可以接受,虽然多了个require很不爽.  

const getAssetUrl = (type) => {return require(`@/assets/${type}.png`)
}

基于 Vue3 + Vite 更恶心了,以下写法是这样的,重要事情说三遍, 不能用绝对路径 * 3 

const getAssetUrl = (type) => {return new URL(`../../../assets/${type}.png`, import.meta.url).href
}

至于还有/public 这种赋值方式又不一样了,简单的事情 似乎更复杂了,纵然是老司机每次还是记不住这里面的弯弯绕绕~~~

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

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

相关文章

响应“一机两用”政策 落实政务外网安全

在数字化时代&#xff0c;政务办公外网安全的重要性日益凸显&#xff0c;特别是在“一机两用”的背景下&#xff0c;即同一台终端既要处理政务内网的数据&#xff0c;又要访问互联网&#xff0c;这对网络安全提出了更高的要求。深信达SPN安全上网方案&#xff0c;即反向沙箱技术…

计算机网络基础——针对实习面试

目录 计算机网络基础OSI七层模型TCP/IP四层模型为什么网络要分层&#xff1f;常见网络协议 计算机网络基础 OSI七层模型 开放系统互连参考模型&#xff08;Open Systems Interconnection Reference Model&#xff0c;简称OSI模型&#xff09;是一个概念性模型&#xff0c;用于…

leetcode100:相同的树

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&…

将已有的MySQL8.0单机架构变成主从复制架构

过程: 把数据库做一个完全备份, 恢复到从节点上, 恢复后从备份的那个点开始往后复制,从而保证后续数据的一致性。 步骤: 修改 master 主节点 的配置&#xff08; server-id log-bin &#xff09;master 主节点 完全备份&#xff08; mysqldump &#xff09;master 主节点 创建…

如何在jupyter notebook切换python环境

目录 参考链接 首先确保conda已经正常安装 conda --version 或者conda -V 以下请将“myenv”替换成自己的命名&#xff01;&#xff01;&#xff01; 1-查看虚拟环境目录 conda env list 2-创建虚拟环境命令 conda create -n myenv 或者 conda create --name myenv 3-激活虚拟环…

【嵌入式软件-STM32】OLED显示屏+调试方法

目录 一、调试方式 1&#xff09;串口调试 优势 弊端 2&#xff09;显示屏调试 优势 弊端 3&#xff09;Keil调试模式 4&#xff09;点灯调试法 5&#xff09;注释调试法 6&#xff09;对照法 二、OLED简介 OLED组件 OLED显示屏 0.96寸OLED模块 OLED外观和种类…

求字符 ‘a‘ 和 ‘b‘ 组成的,最大长度为n的字符串中字典序第 k 个字符串

求字符 ‘a’ 和 ‘b’ 组成的&#xff0c;最大长度为n的字符串中字典序第 k 个字符串 先来解释一下这个题目&#xff0c;假设最大长度为3&#xff0c;那么由字符a和b组成的字符串有&#xff1a; a, b, ab, aaa, aba...把这些字符串按照字典序排序: aaaaaaaabababaabbbbabaab…

再见 阿里巴巴EasyExcel替代品EasyExcel-Plus即将诞生

最近阿里发布公告通知&#xff0c;停止对EasyExcel 更新和维护&#xff0c;EasyExcel 是一款知名的 Java Excel 工具库&#xff0c;由阿里巴巴开源&#xff0c;作者是玉霄&#xff0c;在 GitHub 上有 30k stars、7.5k forks。 据了解&#xff0c;EasyExcel作者玉霄)去年已经从…

如何保证MySQL与Redis缓存的数据一致性?

文章目录 一、引言二、场景来源三、高并发解决方案1. 先更新缓存&#xff0c;再更新数据库2. 先更新数据库&#xff0c;再更新缓存3. 先删除缓存&#xff0c;再更新数据库4. 先更新数据库&#xff0c;再删除缓存小结 四、拓展方案1. 分布式锁与分布式事务2. 消息队列3. 监听bin…

暴露IP地址会影响网络隐私安全吗?

​我的IP地址暴露后会影响隐私安全吗&#xff1f; 互联网飞速发展以来&#xff0c;短短数十年&#xff0c;我们的工作生活就不能够离开互联网。那么作为网络连接传递数据的门户——IP地址&#xff0c;大家都有一定的疑惑和好奇。其中关于自身安全的尤为重要&#xff0c;所以IP…

通过 SSH 隧道将本地端口转发到远程主机

由于服务器防火墙,只开放了22端口,想要通过5901访问服务器上的远程桌面,可以通过下面的方式进行隧道转发。 一、示例命令 这条代码的作用是通过 SSH 创建一个 本地端口转发,将你本地的端口(5901)通过加密的 SSH 隧道连接到远程服务器上的端口(5901)。这种方式通常用于在…

CTF攻防世界小白刷题自学笔记14

fileclude&#xff0c;难度&#xff1a;1&#xff0c;方向&#xff1a;Web 题目来源:CTF 题目描述:好多file呀&#xff01; 给一下题目链接&#xff1a;攻防世界Web方向新手模式第17题。 打开一看&#xff0c;这熟悉的味道&#xff0c;跟上一篇文章基本一摸一样的&#xff…

微信小程序开发,仿小红书瀑布流实现

文章目录 1. 涉及到的知识点2. 功能描述3. 通用属性3. 代码实现过程4. 报错问题&#xff0c;解决方法5. 运行效果图 1. 涉及到的知识点 grid-view的使用官方文档指南&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html 2. 功能描述 Sk…

ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;“魅力”繁峙宣传网站系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了“魅力”繁峙宣传网站系统的发展&#x…

基于Matlab的碎纸片的自动拼接复原技术

碎纸片的自动拼接复原技术 摘要&#xff1a;破碎文件的拼接在司法物证复原、历史文献修复以及军事情报获取等领域都有着重要的应用。目前发现对碎纸片的拼接大部分由人工完成&#xff0c;准确率较高&#xff0c;但耗费大量人力财力及时间&#xff0c;效率很低。随着计算机技术的…

Kafka-Eagle的配置——kafka可视化界面

通过百度网盘分享的文件&#xff1a;kafka-eagle-bin-2.0.8.tar.gz 链接&#xff1a;https://pan.baidu.com/s/1H3YONkL97uXbLTPMZHrfdg?pwdsltu 提取码&#xff1a;sltu 一、界面展示 二、软件配置 1、关闭kafka集群 kf.sh stop 2、将该软件上传到/opt/modules下 cd /opt…

【C#】CS0246: 未能找到类型或命名空间名“MySql”

前言 在学习C#,一定要学会了使用NuGet,以后包问题都可以通过此方法解决。望大家不加班~ 问题描述 项目 visual studio 2022 .NETFramework,Version=v4.8错误 CS0246: 未能找到类型或命名空间名“MySql”问题 CS0246 错误表示编译器无法在当前项目中找到名为“MySql”的…

通过Python 调整Excel行高、列宽

在Excel中&#xff0c;默认的行高和列宽可能不足以完全显示某些单元格中的内容&#xff0c;特别是当内容较长时。通过调整行高和列宽&#xff0c;可以确保所有数据都能完整显示&#xff0c;避免内容被截断。合理的行高和列宽可以使表格看起来更加整洁和专业&#xff0c;尤其是在…

如何用Java爬虫“采集”商品订单详情的编程旅程

在这个数据驱动的世界里&#xff0c;如果你不是数据&#xff0c;那么你一定是在收集数据。就像蜜蜂采集花粉一样&#xff0c;我们程序员也需要采集数据&#xff0c;以便分析、优化和做出明智的决策。今天&#xff0c;我们就来聊聊如何使用Java编写一个爬虫&#xff0c;这个爬虫…

执行flink sql连接clickhouse库

手把手教学&#xff0c;flink connector打通clickhouse大数据库&#xff0c;通过下发flink sql&#xff0c;来使用ck。 组件版本jdk1.8flink1.17.2clickhouse23.12.2.59 1.背景 flink官方不支持clickhouse连接器&#xff0c;工作中难免会用到。 2.方案 利用GitHub大佬提供…