解决nuxt3引入图片报错:ReferenceError: require is not defined

现象:

原因:在nuxt3中不支持require的方式引入图片/文件等静态资源。

解决办法:

1. 直接在img标签中的src属性里写明图片的路径,但是此时src前面不能有冒号做动态绑定!:

 src="@/assets/images/loading.gif"  

 

 但注意:图片路径一定要从assets目录开始,否则会报错: 找不到文件。

2. 通过import 图片变量 from ''图片路径",然后在img标签中的src属性引用该图片变量

此时src属性左边需要有冒号表示动态绑定,否则同样报错找不到文件

但需要注意的是: 如果使用的是<script lang="ts">标签

则setup函数里面state定义的变量需要通过...toRefs函数结果并return返回。

如果使用的是<script setup lang="ts">标签, 则不需要return返回,该标签内部的所有变量默认都是响应式数据,所以不需要使用reactive

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

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

相关文章

【为什么POI的SXSSFWorkbook占用内存更小?】

&#x1f513;为什么POI的SXSSFWorkbook占用内存更小&#xff1f; &#x1f3c6;POI的SXSSFWorkbook&#x1f3c6;POI的SXSSFWorkbook占用内存&#x1f3c6;扩展配置行缓存限制 &#x1f3c6;POI的SXSSFWorkbook SXSSFWorkbook类是Apache POI库的一部分&#xff0c;它是一个流…

【论文阅读】LoRA: Low-Rank Adaptation of Large Language Models

code&#xff1a;GitHub - microsoft/LoRA: Code for loralib, an implementation of "LoRA: Low-Rank Adaptation of Large Language Models" 做法&#xff1a; 把预训练LLMs里面的参数权重给冻结&#xff1b;向transformer架构中的每一层&#xff0c;注入可训练的…

STM32 LCD 简单显示彩色图片

STM32 LCD 数组方式简单显示彩色图片 文章目录 STM32 LCD 数组方式简单显示彩色图片前言1、图片处理1.1 准备图片1.2 查看和调整图片大小 2、Picture2Hex软件使用3、函数代码实现3、图片显示效果4、显示图片太大会报错总结 前言 在使用LCD填充的时候发现正点原子提供了一个很好…

用于解释非目标代谢组学数据的集成深度学习框架

摘要 非定向代谢组学正获得广泛应用。数据分析的关键方面包括建模代谢网络的复杂活动、选择与临床结果相关的代谢物以及发现关键代谢途径以揭示生物学机制。数据分析中的一个关键障碍未得到很好解决&#xff0c;即数据特征与已知代谢物之间的匹配不确定性问题。鉴于实验技术的…

字符雨canvas

整体思路&#xff1a; 确定好字符雨的具体字符是什么&#xff0c;需要多少行多少列这里是写死的其实也可以用循环加随机的方式生成不一样的字符雨&#xff0c;行列也可以读一下宽度然后做一下出发算一下也行首先得有一张画布搞起&#xff0c;然后循环列数去绘画字符定时器循环…

获取Java类路径

利用System.getProperty(“java.class.path”)可以获取Java类路径&#xff08;Java class path&#xff09;。 package com.thb;import java.io.IOException;public class Test5 {public static void main(String[] args) throws IOException {System.out.println(System.getP…

【活动回顾】Databend 云数仓与 Databend Playground 扩展组件介绍

2023 年 12 月 7 日&#xff0c;作为 KubeSphere 的合作伙伴&#xff0c;Databend 荣幸地受邀参与了 KubeSphere 社区主办的云原生技术直播活动。本次活动的核心议题为「Databend 云数仓与 Databend Playground 扩展组件介绍」&#xff0c;此次分享由 Databend Labs 的研发工程…

大数据笔记(待续)

mysql 缓存技术 数据库和缓存双写数据一致性问题常见的解决方案 常见方案通常情况下&#xff0c;我们使用缓存的主要目的是为了提升查询的性能。大多数情况下&#xff0c;我们是这样使用缓存的&#xff1a; 用户请求过来之后&#xff0c;先查缓存有没有数据&#xff0c;如果有…

基于SSM的便民自行车管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

人工智能与VR技术

人工智能与虚拟现实技术&#xff08;VR&#xff09;的结合是当今科技领域中备受瞩目的话题。两者的结合不仅在娱乐、教育、医疗等领域展现出了巨大的潜力&#xff0c;而且在未来的发展趋势中也将具有重要意义。本文将从技术融合、应用场景和未来发展等方面探讨人工智能与虚拟现…

基于JAVA+SpringBoot+微信小程序的宠物领养平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着人们生活水平的提…

系列十五、Redis面试题集锦

一、Redis面试题集锦 1.1、Redis到底是单线程还是多线程 Redis6.0版本之前的单线程指的是其网络IO和键值对读写是由一个线程完成的&#xff1b; Redis6.0引入的多线程指的是网络请求过程采用了多线程&#xff0c;而键值对读写命令仍然是单线程的&#xff0c;所以多线程环境下&…

多模态融合slam技术学习

目录 前言 一、视觉-惯性SLAM算法 二、激光-惯性SLAM算法 三、激光与视觉融合算法 总结 前言 最近在找实习&#xff0c;又想着要怎么完成毕业论文&#xff0c;打算做下机器人导航实验&#xff0c;学习下相关算法。今天是多模态融合slam技术&#xff0c;课程链接&#xff1a;h…

HarmonyOS(ArkTS)基础组件参数 媒体类型讲解

我们这里做了一个空的容器 然后 我们可以这样写 Entry Component struct Index {build() {Row() {Column() {Text("你好")Divider()Button("点击")}.width(100%)}.height(100%)} }这里 我们分别使用了三个组件 Text文本组件 Divider分割线组件 Button按钮…

c语言:指针运算

目录 指针类型与整型进行加减 规律 同类型指针减法运算 其他类型的指针运算 一个数据对象的内存位置有两个重要信息&#xff1a; 数据对象的首地址。数据对象占用存储空间大小 指针类型的值存储的是内存地址。内存地址是从0开始&#xff0c;依次加1的整型数据。 指针类…

echarts自定义tooltip位置和内容

tooltip: {trigger: item,backgroundColor: none,position: function (pos, params, dom, rect, size) {//我这个是每次显示30条数据 所以这么判断var obj params.dataIndex < 15 ? "right" : "left"return obj;},formatter: (params) > {//收入和…

拥有「中美韩」资方背景的Story,下轮牛市密码?

Story由 (A16Z) 领投&#xff0c;帕丽斯希尔顿 (Paris Hilton) 提供 5400 万美元融资&#xff0c;标志着IP领域的一个转折点。他们认为 Story Protocol 有何独特之处&#xff1f;该项目旨在如何彻底改变数字世界&#xff1f;区块链的致富效应&#xff0c;已经让传统金融蠢蠢欲动…

大数据----31.hbase安装启动

二.Hbase安装 先前安装&#xff1a; Zookeeper 正常部署 首先保证 Zookeeper 集群的正常部署&#xff0c;并启动之。 三台机器都执行&#xff1a;zkServer.sh startHadoop 正常部署 Hadoop 集群的正常部署并启动。 主节点上进行 &#xff1a;start-all.sh 1.HBase 的获取 一定…

2023微博AIGC算法工程师一面 面试题

来源&#xff1a;投稿 作者&#xff1a;LSC 编辑&#xff1a;学姐 一面 35min左右&#xff0c;主要是根据简历发问的 1.自我介绍 介绍实习项目, 聊的比较详细&#xff0c;但是我实习项目限制比较多&#xff0c;做的不够深入。 2.多标签分类的损失函数 多标签分类任务&#x…

拦截器与过滤器的区别

1.最通俗的理解 过滤器&#xff1a;你要从一堆请求中通过一个工具挑选出符合你要求的请求&#xff0c;而这个工具就是过滤器 拦截器&#xff1a;当一个流程正在进行时&#xff0c;你希望干预它的进展&#xff0c;甚至是直接将它终止 2.触发时机不同 过滤器是在请求进入容器…