Vue3 动态获取 assets 文件夹图片

devtools/2024/11/20 20:36:48/

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

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

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

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

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

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

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


http://www.ppmy.cn/devtools/135576.html

相关文章

C++设计模式:工厂方法模式

工厂方法模式是一种创建型设计模式&#xff0c;其核心是将对象的创建延迟到子类中&#xff0c;通过定义一个接口来创建对象&#xff0c;使得子类决定实例化哪一个类。它在需要扩展产品类型时特别有用&#xff0c;能够避免代码的重复和耦合。 工厂方法模式的核心概念 抽象产品&…

【MYSQL】什么是关系型数据库与非关系型数据库?

真正的让你快速理解什么是关系型数据库与非关系型数据库~ 主要是以查询语句&#xff0c;存储结构&#xff0c;拓展 性上的区别。 关系型数据库&#xff08;最经典就是mysql&#xff0c;oracle&#xff09;&#xff1a;它是支持SQL语言&#xff0c;并且关系型数据库大部分都支持…

强化学习数学原理学习(四)

前言 今天是时序差分学习 正文 首先,明确一点,时序差分也是无模型的情况下的强化学习方法,TD学习是蒙特卡洛思想和动态编程&#xff08;DP&#xff09;思想的结合。最基础的时序差分学习估计状态值&#xff0c;而后续提出的Sarsa和Q-learning方法则直接对动作值进行估计。 …

在Linux上如何利用NTP使客户端和服务端的时间同步

对于服务端 一、先在服务端安装相关配置-----yum install chrony -y-----并启动 二、进入chrony的文件里----在第三行修改为阿里云时间服务地址 三、在服务端重启chrony 四、进行测试------chronyc sources -v 五、进入chrony的文件里添加客户端的ip地址---在第26行&#…

关于adb shell登录开发板后terminal显示不完整

现象 今天有个同事跟我说&#xff0c;adb shell 登录开发板后&#xff0c;终端显示不完整&#xff0c;超出边界后就会出现奇怪的问题&#xff0c;比如字符覆盖显示等。如下图所示。 正常情况下应该如下图所示&#xff1a; 很明显&#xff0c;第一张图的显示区域只有完整区域…

爬虫策略——反爬机制

现代网站通常会使用多种反爬手段来限制爬虫访问数据。了解这些机制并针对性地制定绕过策略&#xff0c;是构建高效爬虫的关键。 1. 常见反爬手段 1.1 User-Agent 检查 网站通常会通过检查请求中的 User-Agent 字段&#xff0c;判断访问是否来自真实用户。爬虫默认的请求库&am…

ubuntu 22.04 shell

原因&#xff1a;在ubuntu&#xff08;18.04&#xff09;默认是指向bin/dash解释器的&#xff0c;dash是小巧的shell&#xff08;阉割版的bash&#xff09;&#xff0c;其功能远没有bash强大和丰富。上述问题就是dash不支持let和i运算等功能造成的。 ls -la /bin/sh lrwxrwxrw…

LeetCode 3239.最少翻转次数使二进制矩阵回文 I:遍历(行和列两种情况分别讨论)

【LetMeFly】3239.最少翻转次数使二进制矩阵回文 I&#xff1a;遍历&#xff08;行和列两种情况分别讨论&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-number-of-flips-to-make-binary-grid-palindromic-i/ 给你一个 m x n 的二进制矩阵 grid…