vue3 require is not defined

news2025/6/9 10:54:52

前言:我想在vue3项目的页面引入图片总是不成功,最后看到说是Vite在作祟,让我来瞧瞧,是怎么回事咧。

看看官方文档怎么说Vite官网地址
在这里插入图片描述
主要是
new URL(url, import.meta.url)
import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

那么就用不到require 了,去掉直接引入imgUrl使用

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

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

相关文章

redis 三主六从高可用dockerswarm高级版(不固定ip)

redis集群(cluster)笔记 redis 三主三从高可用集群docker swarm redis 三主六从高可用docker(不固定ip) redis 三主六从高可用dockerswarm高级版(不固定ip) 此博客解决,redis加入集群后,是用于停掉后重启,将nodes.conf中的旧的Ip替换为新的…

[C#]使用onnxruntime部署yolov8-onnx实例分割模型

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 YOLOv8 是一个 SOTA 模型,它建立在以前 YOLO 版本的成功基础上,并引入了新的功能和改进,以进一步提升性能和灵活性。具体创新包括一个新的骨干网络、一个新…

vscode无识别已有的maven java项目(visual studio code not recognizing java project)

文章目录 事情经过尝试疑惑问题解决结论 事情经过 未安装任何Java Extension Pack使用 Maven 的 archetype:generate 命令来创建一个新的项目使用vscode打开了该目录然后安装Java Extension Pack等java插件配置了vscode settings.json中的 java.configuration.runtimes和 java…

day58算法训练|单调栈part01

参考:代码随想录 单调栈的使用情况: 通常是一维数组,要寻找任一个元素的右边或者左边第一个比自己大或者小的元素的位置,此时我们就要想到可以用单调栈了。时间复杂度为O(n)。 单调栈的本质是空间换时间,因为在遍历…

cpolar-内网穿透

目录 一、打开网址注册账号 二、下载客户端 三、创建 四、测试 一、打开网址注册账号 coplar官网 二、下载客户端 登录成功后会跳转该页面 三、创建 双击打开 设置名称、要投射的本地端口号、默认为http协议 点击隧道列表,然后点击启动 选择公网地址就可以访问…

「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图(一)

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 在web项目中使用DHTMLX Gantt时,开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的…

UI5与后端的文件交互(三)

文章目录 前言一、开发Action1. 修改Table2. BDEF中新增Action3. 新建结构,用于接收uuid以及附件数据4. 实现Method逻辑 二、UI5项目修改1. 添加表格行2. 事件处理函数3. 点击文件名时的事件 三、测试 前言 这系列文章详细记录在Fiori应用中如何在前端和后端之间使…

Pikachu--数字型注入(post)

Pikachu--数字型注入(post) 进入页面 输入 127.0.0.1/pikachu 选择sql注入(数字型) 2)打开foxy代理,输入值“1”进行bp抓包 3)将这个获取的包转发到Repeater中 判断注入点 4)用单…

光耀未来 第一届能源电子产业创新大赛太阳能光伏赛道决赛在宜宾举行

1月3日,第一届能源电子产业创新大赛太阳能光伏赛道决赛在宜宾盛大举行,本次比赛吸引了全国范围内的光伏行业顶尖人才和创新团队参与。 为深入贯彻《关于推动能源电子产业发展的指导意见》,推动我国能源电子产业升级,工业和信息化部…

每日算法打卡:递归实现组合型枚举 day 4

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例:输出样例: 题目分析示例代码优化 原题链接 93. 递归实现组合型枚举 题目难度:简单 题目来源:《算法竞赛进阶指南》 题目描述 从 1∼n 这 n 个整数中随机选出 m 个…

电动汽车BMS PCB制板的技术分析与可制造性设计

随着电动汽车行业的迅猛发展,各大厂商纷纷投入巨资进行技术研发和创新。电动汽车的核心之一在于其电池管理系统(Battery Management System, BMS),而BMS的心脏则是其印刷电路板(PCB)。通过这篇文章探讨电动…

百度Apollo:激光雷达检测技术深度解析

🎬 鸽芷咕:个人主页 🔥 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 粉丝福利活动 ✅参与方式:通过连接报名观看课程,即可免费获取精美周边 ⛳️活动链接&#xf…

prometheus grafana nginx 安装配置和使用

文章目录 前传prometheus exporter容器监控nginxnginx需要加载stub_status监控查看有没有,如果有,去配置下nginx重要,需要重启nginx测试监控是否成功 prometheus中添加nginx-exporter配置 grafana外传 前传 prometheus grafana的安装使用&am…

防爆气象站跟传统气象站相比有哪些优势?

防爆气象站是一种特殊的气象站,设计用于在易燃易爆、高温、潮湿等恶劣环境下进行气象监测。以下是防爆气象站的优点: 防爆性能:防爆气象站能够承受极端恶劣的环境条件,可以在易燃易爆、高温、潮湿等危险环境下进行工作&#xff0…

企业无法处理海量的大文件,FTP不可靠该如何进行替代?

FTP是一项标准协议,用于在网络中进行文件传输,最早于1971年问世,被认为是互联网的基石之一。FTP可在不同操作系统和网络环境下实现文件上传和下载,具备方便、迅速和高效的特性,广泛应用于网站建设、软件更新、数据备份…

Django 8 通用视图基础

1. 什么是通用视图 1. 在terminal 输入 django-admin startapp the_12回车 2. tutorial\settings.py 注册 INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.sta…

权威外媒聚焦:Messari强调波场TRON在全球加密支付领域的引领作用

近日,金融时报、费加罗报及美联社等海外权威媒体就波场TRON 在全球加密支付领域的重要进展发布了相关报道。报道引述加密研究机构Messari 《Crypto Theses for 2024》年度报告,重点强调了波场TRON在推动全球加密货币支付尤其是稳定币USDT应用方面的显著成就。 报道提到,波场TR…

【LeetCode:114. 二叉树展开为链表 | 二叉树 + 递归】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

Vue3+Typescript+setup / Vue2使用scrollIntoView()实现锚点跳转指定列表

在标签上添加ref属性来引用DOM元素, Vue2中使用$refs来获取该DOM元素并调用scrollIntoView()方法。 使用ref"yearDiv"在每个年份的div元素上添加了一个引用。然后,在yearClick方法中,我们通过this.$refs.yearDiv[year]来获取对应…

HTML5-新增表单input属性

新增表单属性 form控件主要新增的属性: autocomplete 是否启用表单的自动完成功能,取值:on(默认)、off novalidate 提交表单时不进行校验,默认会进行表单校验 autocomplete属性 概念:autocomplete属性…