vue3引入图片 无法使用require, vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

在vue3中 require引入图片的本地资源报错Uncaught (in promise) ReferenceError: require is not defined

<template>

<img :src="imageSrc" alt="My Image"> </template>

<script>

   import imageSrc from '@/assets/image.png'; export default { data() { return { imageSrc }; } };

</script>

 使用vue3+vite构建的项目使用require会报错

解决方案

一、

使用 @rollup/plugin-commonjs 插件,用于将CommonJS模块转换为ES6模块的Rollup插件.
1、安装@rollup/plugin-commonis 插件
终端中输入

npm i @rollup/plugin-commonjs
 

2、在vite.config.ts配置中添加该插件,注意 commonjs0必须在vue()上面,否则不生效 

import commonjs from '@rollup/plugin-commonjs';

const plugins = [
    commonjs() as any,// 要放在第一行,否则不生效
];
 

3、随意导入commonjs工具包

import SoftAlgorithm from '../SDK/soft-algorithm-min.js';
console.log('引入成功:', SoftAlgorithm);
 

当consle能打印出来则,引入成功 

二、

使用new URL(‘路径’,import.meta.url).href

 用法:

new URL(‘路径’,import.meta.url).href

 pcImage: new URL("@/assets/qy-pc.JPG", import.meta.url).href,

 在构建之后相对路径会打包不到具体文件,使用@/解决

"@/assets/qy-pc.JPG"  

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

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

相关文章

研究发现:提示中加入数百个示例显著提升大型语言模型的性能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

SQLAlchemy 2.0 中文文档翻译完成

SqlAlchemy 2.0 中文文档概述SQLAlchemy Unified Tutorial建立连接 - Engine处理事务和 DBAPI处理数据库元数据处理数据使用插入语句使用 SELECT 语句使用 UPDATE 和 DELETE 语句使用 ORM 进行数据操作处理 ORM 相关对象进一步阅读SQLAlchemy ORMORM 快速入门ORM 映射类配置ORM…

机器学习(XgBoost)预测顶和底

之前的文章中&#xff0c;我们对中证1000指数进行了顶和底的标注。这一篇我们将利用这份标注数据&#xff0c;实现机器学习预测顶和底&#xff0c;并探讨一些机器学习的原理。 我们选取的特征非常简单–上影线和WR&#xff08;William’s R&#xff09;的一个变种。选取这两个…

python基本语法与使用

Python是一种高级编程语言&#xff0c;它被广泛应用于各种领域&#xff0c;包括Web开发、数据科学、人工智能等。以下是Python的基本语法和使用方法&#xff1a; 1.注释 使用#来添加单行注释&#xff0c;多行注释可以使用或"""来包围。 # 这是一个单行注释…

深入浅出MySQL-01-【SQL基础】

前言 环境&#xff1a; Windows11MySQL-8.0.35 1.服务启动和关闭 Windows系统中&#xff1a; // 启动MySQL服务 net start mysql80 // 关闭MySQL服务 net stop mysql802.SQL基础 2.1.登录 登录本机MySQL服务&#xff0c;用户是root&#xff08;-u指定&#xff09;&#…

ElementUI RUOYI 深色适配

1. 切换按钮&#xff1a;随便找个页面放上去 页面触发逻辑如下 a. html 按钮结构&#xff08;可自定义&#xff09; <el-switchstyle"margin-top: 4px; margin-left: 8px; margin-right: 8px"v-model"isDark"inline-promptactive-icon"Moon"…

用阅读丈量世界 用标准突破边界——The Open Group“开放标准书单”推荐!

The Open Group 依托旗下多个论坛&#xff0c;不断推陈出新标准、指南、白皮书、案例分析等形式多样的发布物&#xff0c;为行业在数字能力赛道的良性高速发展提供先进的理念、方法、策略以及具体应用场景下的最佳实践。 正值第29个“世界读书日”&#xff0c;The Open Group精…

如何解决Windows本地微服务并发启动后端口占用问题

在微服务架构中&#xff0c;经常会遇到本地开发时多个服务需要并行运行&#xff0c;而断开服务后由于某些原因导致端口未正确释放&#xff0c;再次启动服务时发现端口被占用的问题。这会阻碍开发进度&#xff0c;解决这一问题非常关键。本文将详细指导你如何在Windows环境下解决…

SQL Server指南:从入门到进阶实战

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

Java面试必问题52:(高级面试篇)MongoDB的详细解释以及他的用法以及他跟Redis的区别以及优势

1. 非结构化数据存储&#xff1a;MongoDB是一个面向文档的NoSQL数据库&#xff0c;它不需要定义固定的数据模式&#xff0c;适用于存储不同结构和半结构化的数据&#xff0c;如日志、JSON文档、传感器数据等。 2. 可扩展性和高性能&#xff1a;MongoDB采用分布式架构&#xff0…

PaddleSeg (2) 模型训练

已处理好数据集和配置文件,可以开始模型训练。 启动训练 python tools/train.py --config configs/xxx.yml --do_eval --use_vdl --save_interval 500 --save_dir output/xxx上述训练命令解释:* `--config`

为什么堆排序的时间复杂度是O(N*logN)?

目录 前言&#xff1a; 堆排序&#xff08;以排升序为例&#xff09; 步骤&#xff08;用大根堆&#xff0c;倒这排&#xff0c;排升序&#xff09;&#xff1a; 1.先把要排列的数组建立成大根堆 2.堆顶元素&#xff08;82&#xff09;和最后一个元素交换&#xff08;2&…

华为OD机试真题-亲子游戏-2024年OD统一考试(C卷D卷 )

题目描述: 宝宝和妈妈参加亲子游戏,在一个二维矩阵(N*N)的格子地图上,宝宝和妈妈抽签决定各自的位置,地图上每个格子有不同的糖果数量,部分格子有障碍物。 游戏规则是妈妈必须在最短的时间(每个单位时间只能走一步)到达宝宝的位置,路上的所有糖果都可以拿走,不能走障…

HYBBS表白墙爆款源码!轻松搭建表白墙网站,更可一键封装成APP,让爱传递无界限

PHP表白墙网站源码&#xff0c;适用于校园内或校区间使用&#xff0c;同时支持封装成APP。告别使用QQ空间的表白墙。 简单安装&#xff0c;只需PHP版本5.6以上即可。 通过上传程序进行安装&#xff0c;并设置账号密码&#xff0c;登录后台后切换模板&#xff0c;适配手机和PC…

计算机网络——应用层协议(1)

在这篇文章初识网络中&#xff0c;我介绍了关于计算机网络的相关知识&#xff0c;以及在这两篇文章中Socket编程和Socket编程——tcp&#xff0c;介绍了使用套接字在两种协议下的网络间通信方式。本篇文章中我将会进一步介绍网络中网络协议的部分&#xff0c;而这将会从应用层开…

[网络编程]socket嵌套字的一些常用接口

目录 一、socket常用接口 1.sockaddr_in 2.socket 3. bind 4.listen 5.accept 6.connect 7.send 8.sendto 9.recv 10.recvfrom 11.close 二、 字节序之间的转换函数 1. inet_ntoa 2. inet_aton 3.inet_addr 4.inet_pton 5.inet_ntop 6.htons 7.ntohs…

[SWPUCTF 2022 新生赛]ez_ez_unserialize

要绕过wakeup函数&#xff0c;只要序列化的中的成员数大于实际成员数&#xff0c;即可绕过。 <?php class X {public $x fllllllag.php; }$anew X(); echo serialize($a); O:1:“X”:1:{s:1:“x”;s:13:“fllllllag.php”;} 修改为 O:1:“X”:3:{s:1:“x”;s:13:“flllll…

NASA数据集—— ACRIMSAT 卫星上的 ACRIM 仪器以快门周期形式收集的 2 级太阳总辐照度

ACRIM III Level 2 Shutter Cycle Data V001 简介 ACR3L2SC_1 是主动空腔辐射计辐照度监测仪&#xff08;ACRIM&#xff09;III 2 级快门周期数据第 1 版产品&#xff0c;包含由 ACRIMSAT 卫星上的 ACRIM 仪器以快门周期形式收集的 2 级太阳总辐照度。 摘要 ACRIMSAT卫星上…

爬虫工具-推广-推广链接

爬虫工具是一种用于自动化获取联网上数据的软件程序。它可以模拟人类在网页上的操作&#xff0c;通过发送HTTP请求获取网页内容&#xff0c;并从中提取所需的数据。以下是一些常用的爬虫工具&#xff1a; Scrapy&#xff1a;Scrapy是一个基于Python的开源爬虫框架&#xff0c;它…

【Java--数据结构】“从扑克到程序:深入探讨洗牌算法的原理与魅力“

前言 以下是学习Java顺序表的一个实例应用———简单的洗牌算法。 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 定义每张扑克牌的属性 生成一副扑克牌&#xff08;不包含大小王&#xff09; 洗牌方法 发牌方…