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

news2024/11/28 10:34:41

问题:在 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) => {
    // 参数一: 相对路径   参数二: 当前路径的URL
    return new URL(`/src/assets/头像${image.type}${image.sex}.png`, import.meta.url).href
  }
</script>

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

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

相关文章

k8s coredns配置

1.coredns可根据集群具体数量修改pod数&#xff0c;官方推荐比例为5/1&#xff0c;即有15台服务器最好是3个pod。 2.coredns会继承pod所在主机的dns解析,修改了主机的dns解析之后&#xff0c;coredns有一段时间的缓存&#xff0c;重启coredns才会在集群内部立刻生效该解析。 …

Linux本地部署Nightingale夜莺监控并实现远程访问提高运维效率

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

C/C++实现汉诺塔游戏和详细解

C/C实现汉诺塔游戏和详细解析 需要详细代码可联系QQ&#xff1a;3324729792 引言 汉诺塔问题是一个经典的递归问题&#xff0c;起源于一个传说中的印度寺庙。在这个问题中&#xff0c;我们需要将所有的圆盘从一个柱子移动到另一个柱子上&#xff0c;且在移动过程中&#xff…

OpenAI放大招:不是GPT-5和搜索引擎,或推AI助理?

近日&#xff0c;关于 ChatGPT 的开发公司 OpenAI 将推出与谷歌搜索竞争的产品的传闻甚嚣尘上。有报道指出&#xff0c;OpenAI 计划增强 ChatGPT 的功能&#xff0c;并进军搜索引擎市场&#xff0c;新产品甚至可能在 5 月 13 日谷歌 I/O 大会的前一天发布。 然而&#xff0c;Op…

React 第三十五章 Fiber 双缓冲

我们可以从三个维度来理解 Fiber&#xff1a; 是一种架构&#xff0c;称之为 Fiber 架构是一种数据类型动态的工作单元 Fiber 架构 在 React v16之前&#xff0c;使用的是 Stack Reconciler&#xff0c;因此那个时候的 React 架构被称之为 Stack 架构。从 React v16 开始&am…

01-02-2

1、typedef的使用 a.语法 typedef 原名 别名&#xff1b;。 ​ typedef struct student {int num;char name[20];char sex; }stu,*pstu;//stu相当于struct student这个类型&#xff0c;*pstu相当于struct student * 别名的理解方法&#xff1a;若是字母前面有符号&#xff0…

uniapp编译H5解决ios的border-radius失效问题

1.解决方案 .card-itemA {width: 650rpx;height: 326rpx;box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);border-radius: 60rpx;overflow: hidden;// 兼容ios的圆角问题transfor…

python实现星号打印出金字塔

#编程实现下列图形的打印 a input() for i in range(int(a)//21): num * * ((i1)*2-1) print(num.center(int(a), )) 编译后通过。输入20后得到下面的星号金字塔

Pikachu 靶场 RCE 通关解析

前言 Pikachu靶场是一种常见的网络安全训练平台&#xff0c;用于模拟真实世界中的网络攻击和防御场景。它提供了一系列的实验室环境&#xff0c;供安全专业人士、学生和爱好者练习和测试他们的技能。 Pikachu靶场的目的是帮助用户了解和掌握网络攻击的原理和技术&#xff0c;…

31万奖金池等你挑战!IJCAI 2024 第九届“信也科技杯”全球AI算法大赛正式开赛!聚焦AI尖端赛题!

赛事概况 随着语音合成技术的不断进步,合成语音与真实语音之间的界限变得模糊,这不仅对数据安全构成威胁,也对科技伦理提出了新的要求。 第九届“信也科技杯”全球AI算法大赛聚焦于语音深度鉴伪识别领域,旨在激发全球算法爱好者和专家的创新潜力,共同应对由人工智能技术发展带来…

Bean的生命周期与循环依赖

如有不对的地方&#xff0c;还请大佬指正 Bean生命周期 扫描类 得到 BeanDefinition(包含bean的class等属性值) 后在BeanFactoryPostProcessor对bean实例化之前对Bean的元数据进行操作&#xff0c;修改Bean的属性值、添加自定义的BeanDefinition 实例化非懒加载单例bean1. …

Android 系统省电软件分析

1、硬件耗电 主要有&#xff1a; 1、屏幕 2、CPU 3、WLAN 4、感应器 5、GPS(目前我们没有) 电量其实是目前手持设备最宝贵的资源之一&#xff0c;大多数设备都需要不断的充电来维持继续使用。不幸的是&#xff0c;对于开发者来说&#xff0c;电量优化是他们最后才会考虑的的事情…

【Linux】自动化构建工具make/Makefile和git介绍

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/qinjh_/category_12625432.html 目录 前言 Linux项目自动化构建工具-make/Makefile 举例 .PHONY 常见符号 依赖关系…

如何把root账号的文件修改为tank账号

linux系统 以当前用户命令创建的目录都是root的用户并且是只读的&#xff1a; 用优盘拷贝的文件及文件夹的权限是&#xff1a; 解决方案是&#xff1a;把root账号的文件修改为tank账号 在Linux系统中&#xff0c;如果您需要将属于root用户的文件或目录的所有权更改到另一个用…

【数据库】docker搭建mysql8一主两从节点,配置proxysql读写分离

docker搭建mysql8一主两从节点&#xff0c;配置proxysql读写分离 一、docker 搭建 mysql8 一主两从节点1.1 相关配置文件与docker启动1.2 半同步复制1.3 主从同步异常处理 二、mysql 中间件 ProxySql 配置读写分离2.1 在mysql服务里创建给proxySQL访问的用户2.2 安装ProxySql及…

Flask 通过SQLAlchemy连接mySQL实现一个实用的用户管理功能

Flask 通过SQLAlchemy连接mySQL实现一个实用的用户管理功能 安装配置 首先确保已经安装如下程序&#xff1a; flask&#xff1a;用于构建web应用程序。flask-sqlalchemy&#xff1a;用于在 Flask 中连接 MySQL 数据库&#xff0c;通过pip install flask-sqlalchemy安装。pym…

2024第二届智慧教育和人类发展国际会议(ICSEHD2024)

2024第二届智慧教育和人类发展国际会议(ICSEHD2024) 会议简介 智慧教育对于提升教育质量、促进教育公平、推动教育现代化和数字化转型、培养创新人才以及推动教育理论的发展都具有重要的意义&#xff0c;对人类发展产生着深远的影响&#xff0c;人类发展是智慧教育的最终目的…

Weblogic 任意文件上传漏洞(CVE-2018-2894)

1 漏洞描述 CVE-2018-2894漏洞存在于Oracle WebLogic Server的Web服务测试页面&#xff08;Web Service Test Page&#xff09;中。这个页面允许用户测试Web服务的功能&#xff0c;但在某些版本中&#xff0c;它包含了一个未经授权的文件上传功能。攻击者可以利用这个漏洞&…

uni-app跨端兼容

1.样式兼容 小程序端不支持*选择器&#xff0c;可以使用&#xff08;view,text&#xff09; 页面视口差异(tabar页、普通页) H5端默认开始scoped 例如骨架屏样式出现问题&#xff0c;需要将之前的样式拷贝到骨架屏中 提示&#xff1a;H5端是单页面应用&#xff0c;scoped隔离…

实训八:使用jQuery技术实现企业信息展示系统的相关功能

实训八:使用jQuery技术实现企业信息展示系统的相关功能 1.题目 使用jQuery技术实现企业信息展示系统的相关功能。 2.目的 (1)掌握jQuery的基本知识。 (2)掌握jQuery的应用方法。 (3)进一步理解Ajax程序的设计方法。 (4)会利用所学知识设计简单的应用程序。 3.内容 用jQuery技术…