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

问题:在 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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++ string类的模拟实现

目录 0.前言 1.string类的常用接口说明&#xff08;续&#xff09; c_str find rfind find_first_of find_last_of find_first_not_of find_last_not_of substr compare 2.常见拷贝辨析 2.1浅拷贝 2.2深拷贝 2.3写时拷贝 3.string的模拟实现 3.1构造与析构函数…

【Ubuntu永久授权串口设备读取权限“/dev/ttyUSB0”】

Ubuntu永久授权串口设备读取权限 1 问题描述2 解决方案2.1 查看ttyUSB0权限&#xff0c;拥有者是root&#xff0c;所属用户组为dialout2.2 查看dialout用户组成员&#xff0c;如图所示&#xff0c;普通用户y不在dialout组中2.3 将普通用户y加入dialout组中2.4 再次查看dialout用…

【C++】详解STL的适配器容器之一:优先级队列 priority_queue

目录 堆算法 概述 向下调整建堆 向上调整建堆 建堆算法 仿函数 概述 使用介绍 emtpy size top push pop 模拟实现 仿函数 框架 向下调整算法 向上调整算法 pop push empty top 要理解优先级队列&#xff0c;需要有如下知识 STL容器之一的vector&#xf…

品鉴中的盲品挑战:如何凭借感官判断红酒的类型与品质

盲品挑战是一种品鉴方式&#xff0c;通过蒙住品鉴者的眼睛&#xff0c;仅凭感官来判断红酒的类型和品质。这种方式考验品鉴者的感官敏锐度和经验&#xff0c;也是提升品鉴能力的一种有趣方式。那么&#xff0c;如何在盲品挑战中凭借感官判断雷盛红酒的类型与品质呢&#xff1f;…

腐烂的橘子

代码实现&#xff1a; int orangesRotting(int **grid, int gridRowSize, int *gridColSizes) {int good 0, bad 0, t 0;for (int i 0; i < gridRowSize; i) {for (int j 0; j < gridColSizes[0]; j) {if (grid[i][j] 1) { // 记录好橘子数good;} else if (grid[i…

04、 .java程序用 editplus 工具打开的过程及在 editplus 工具中配置 java/javac 命令的过程

EditPlus 工具的使用&#xff1a; 1、安装 editplus 工具的过程&#xff1a;其一、安装包地址&#xff1a;其二、安装步骤&#xff1a; 2、使用 editplus 工具打开 .java 程序的过程&#xff1a;其一、修改默认打开 .java 的工具&#xff1a;其二、效果展示&#xff1a; 3、在 …

外卖系统微信小程序支付

微信小程序支付时序图 其中第9.步骤就是微信小程序前端调用wx.requestPayment

软件设计中的数字:7

“ 使软件更易理解的秘密&#xff1a;米勒法则” 小游戏 学习之前先一起玩一个小游戏。 3秒钟时间&#xff0c;看看下面的图片中有多少个小块&#xff1f; 3秒到了&#xff0c;数出来了吗&#xff1f;22个。 没数出来也没关系&#xff0c;我也没数出来o(╥﹏╥)o 现在&…

用户需求甄别和筛选的6大标准

产品经理日常经常接收到大量的需求&#xff0c;并不是所有的需求都需要开发&#xff0c;需要进行甄别和筛选&#xff0c;这样有利于确保项目的成功、优化资源利用以及提高产品质量。 那么针对这些用户需求进行甄别或筛选的评判标准是什么&#xff1f;需求筛选可以说是初步的需求…

力扣刷题 day1

移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 看到这道题&#xff0c;是否第一个想法就是双指针&#xff0c;下面我们就来使用双指针来完成这道题. 图: 代码: java: // 移动 0 双指针public void moveZeroes(int[] nums) {for (int current 0, dest -1; …

Android 系统省电软件分析

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

全景3d云展览编辑平台让您的展示更加高效、专业、有趣

在当今数字化浪潮中&#xff0c;线上三维云展编辑平台以其独特的优势&#xff0c;成为企业展示自我、吸引客户的新利器。我们的平台专为不同行业定制&#xff0c;提供海量展厅模板&#xff0c;让您的云展厅快速成型&#xff0c;既提升了建展效率&#xff0c;又大幅节约了成本。…

宋仕强论道之新质生产力

宋仕强论道之新质生产力&#xff0c;宋仕强说当前5G通信、人工智能、万物互联、工业互联网、数字经济、新能源技术和产业等领域正蓬勃发展&#xff0c;成为未来经济增长的重要推动力&#xff0c;也是目前提倡的新质生产力的重要组成部分。而这些领域的发展都离不开数据的采集、…

如何在CentOS7本地搭建ONLYOFFICE办公套件结合内网穿透实现公网访问

文章目录 1. 安装Docker2. 本地安装部署ONLYOFFICE3. 安装cpolar内网穿透4. 固定OnlyOffice公网地址 本篇文章讲解如何使用Docker在本地服务器上安装ONLYOFFICE&#xff0c;并结合cpolar内网穿透实现公网访问。 Community Edition允许您在本地服务器上安装ONLYOFFICE文档&…

CoSeg: Cognitively Inspired Unsupervised Generic Event Segmentation

名词解释 1.特征重建 特征重建是一种机器学习中常用的技术&#xff0c;通常用于自监督学习或无监督学习任务。在特征重建中&#xff0c;模型被要求将输入数据经过编码器&#xff08;encoder&#xff09;转换成某种表示&#xff0c;然后再经过解码器&#xff08;decoder&#x…

栈结构(详解)

1.栈的概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&am…

UE4 自定义shader获取灯光位置

UE4.26:How to get the direction of specific directional lights in custom node material? - #4 by Arkiras - Rendering - Epic Developer Community Forums 获取灯光位置的shader&#xff0c;应该是这个了atmosphere sun light vector 和vertexNormalWS的叉乘add一个固有…

【数据库系统工程师】2024年5月考前最后冲刺指南

一、备考关键&#xff1a; 高效率的备考方式&#xff1a;多轮迭代学习 △ 基础阶段 △ 大面积撒网(60%) 略读&#xff0d;> 做题 &#xff0d;> 回顾 &#xff0d;> 精读 △ 积累阶段 △ 有针对性的突破(30%) 完成所有章节之后&#xff0c;进行真题测试&#x…

【C++】命名空间、缺省参数、函数重载、引用

文章目录 1.认识命名空间2.命名空间的使用3.C的输入和输出4.缺省参数4.1缺省参数的概念4.2缺省参数的分类 5.函数重载6.引用6.1引用的概念6.2引用的特性6.3常引用(重点题目)6.4引用和指针的区别 1.认识命名空间 C总计63个关键字&#xff0c;C语言32个关键字 下面让我们学习一…

难以重现的 Bug如何处理

对很多测试人员&#xff08;尤其是对新手来说&#xff09;在工作过程中最不愿遇到的一件事情就是&#xff1a;在测试过 程中发现了一个问题&#xff0c;觉得是 bug&#xff0c;再试的时候又正常了。 碰到这样的事情&#xff0c;职业素养和测试人员长期养成的死磕的习性会让她…