Vue3 动态引入图片: require is not defined报错

server/2024/9/23 18:19:37/

问题:在 Vue3 项目中,使用 require 引入图片,报错 require is not defined

原因: Vue3 使用的是 vite,而 require 是 Webpack 的方法。

官网说明:
在这里插入图片描述

解决代码:

<template><div v-for="(item, index) in list" class="list-item"><img :src="getAssetURL(item)" alt=""> </div>
</template><script setup>import { ref } from 'vue'const list = ref([{sex: '男',name: '张小白',type: '成人'},{sex: '女',name: '张小白',type: '成人'}])const getAssetURL = (image) => {// 参数一: 相对路径   参数二: 当前路径的URLreturn new URL(`/src/assets/头像${image.type}${image.sex}.png`, import.meta.url).href}
</script>

http://www.ppmy.cn/server/36014.html

相关文章

秋招后端开发面试题 - MySQL基础

目录 MySQL基础前言面试题MySQL 基础篇Mysql 的基础架构&#xff1f;MySQL 的长连接和短连接长连接引起的异常重启问题&#xff1f;说一下 MySQL 执行一条查询语句的内部执行过程&#xff1f;MySQL 查询缓存的功能有何优缺点&#xff1f;MySQL 的常用引擎都有哪些&#xff1f;I…

ApiHug-小说明

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | MarketplaceApiHug-H…

vue computed的缓存在哪里

在 Vue 中&#xff0c;计算属性的缓存存在于计算属性本身所属的组件实例中。 具体来说&#xff0c;缓存是作为组件实例的一部分而存在的&#xff0c;在组件被销毁时&#xff0c;缓存也会随之被销毁。 当组件实例被创建时&#xff0c;Vue 会为每个计算属性创建一个闭包&#x…

【Redis分布式缓存】 哨兵机制

Redis 哨兵机制 哨兵作用和原理 Redis提供了哨兵&#xff08;Sentinel&#xff09;机制来实现主从集群的自动故障恢复。 哨兵的作用 监控&#xff1a;Sentinel 会不断检查您的master和slave是否按预期工作自动故障恢复&#xff1a;如果master故障&#xff0c;Sentinel会将一…

大厂Java面试题:MyBatis是如何进行分页的?分页插件的实现原理是什么?

大家好&#xff0c;我是王有志。 今天给大家带来的是一道来自京东的关于 MyBatis 实现分页功能的面试题&#xff1a;MyBatis是如何进行分页的&#xff1f;分页插件的实现原理是什么&#xff1f;通常&#xff0c;分页的方式可以分为两种&#xff1a; 逻辑&#xff08;内存&…

关于IDEA中项目中各个方法、引用、注解等全部报错的情况

今天打开项目弹出很多提示框&#xff0c;也没注意&#xff0c;然后突然发现项目所有都在报错&#xff0c;不管是启动类还是方法类&#xff0c;各种注解、方法、引用等全红了&#xff0c;随便打开一个都是密密麻麻全红。 首先排查依赖和JDK等引用问题&#xff0c;包括我们的mave…

“Postman 中文版使用教程:如何切换到中文界面?”

Postman 的很好用的接口测试软件。但是&#xff0c;Postman 默认是英文版的&#xff0c;也不支持在软件内切换为中文版。很多同学的英语并不是很好&#xff0c;看到一堆的英文很是头痛。 今天我们来介绍下&#xff1a;切换到 Postman 中文版的方法。想要学习更多的关于 Postma…

基于EWT联合SVD去噪

一、代码原理 &#xff08;1&#xff09;基于EWT-SVD的信号去噪算法原理 经验小波变换&#xff08;Empirical Wavelet Transform&#xff0c;EWT&#xff09;&#xff1a;EWT是一种基于信号局部特征的小波变换方法&#xff0c;能够更好地适应非线性和非平稳信号的特性。奇异值…