解决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

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

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

相关文章

Tekton 基于 gitlab 触发流水线

Tekton 基于 gitlab 触发流水线 Tekton EventListener 在8080端口监听事件&#xff0c;Gitlab 提交代码产生push 事件&#xff0c;gitlab webhook触发tekton流水线执行。 前置要求&#xff1a; kubernetes集群中已部署 tekton pipeline、tekton triggers以及tekton dashboa…

CSS特效030:日蚀动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

Amazon CodeWhisperer:AI 编程助手

文章作者&#xff1a;prigioni 1. 什么是 Amazon CodeWhisperer&#xff1f; Amazon CodeWhisperer 能够理解以自然语言&#xff08;英语&#xff09;编写的注释&#xff0c;并能实时生成多条代码建议&#xff0c;以此提高开发人员生产力。该服务可以直接在集成开发环境&#…

C# URL参数编码

string s "lw123abc测试信息&#xff01;#&#xffe5;%……&*&#xff08;&#xff09;——"; Console.WriteLine("原数据:\t\t" s); String s2 Uri.EscapeDataString(s);//Uri.EscapeDataString() 编码 Console.WriteLine("Hexdata:\t&qu…

spring 笔记五 SpringMVC的数据响应

文章目录 SpringMVC的数据响应SpringMVC的数据响应方式回写数据 SpringMVC的数据响应 SpringMVC的数据响应方式 页面跳转 直接返回字符串通过ModelAndView对象返回 回写数据 直接返回字符串返回对象或集合 返回字符串形式 直接返回字符串&#xff1a;此种方式会将返回的字符…

风速预测(四)基于Pytorch的EMD-Transformer模型

目录 前言 1 风速数据EMD分解与可视化 1.1 导入数据 1.2 EMD分解 2 数据集制作与预处理 2.1 先划分数据集&#xff0c;按照8&#xff1a;2划分训练集和测试集 2.2 设置滑动窗口大小为7&#xff0c;制作数据集 3 基于Pytorch的EMD-Transformer模型预测 3.1 数据加载&am…

2024 年 值得收藏的10 款顶级 Windows 数据恢复软件

您是否需要并搜索过某个文件或文件夹&#xff0c;却发现您最近不小心删除了它&#xff1f;或者更糟糕的是&#xff0c;您不知道文件/文件夹发生了什么&#xff0c;因为由于某种原因&#xff0c;它从您的驱动器中消失了&#xff1f;这些事情会造成伤害并且可能令人沮丧&#xff…

使用Redis构建简单的社交网站

文章目录 第1关&#xff1a;创建用户与动态第2关&#xff1a;处理用户关系第3关&#xff1a;状态与信息流 第1关&#xff1a;创建用户与动态 编程要求 在Begin-End区域编写 create_user(login_name, real_name) 函数&#xff0c;实现创建新用户的功能&#xff0c;具体参数与要…

【注解和反射】-- 02 反射

Java反射 01 概述 1.1 静态 vs 动态语言 动态语言 是一类在运行时可以改变其结构的语言&#xff1a;例如新的函数、对象、甚至代码可以被引进&#xff0c;已有的函数可以被删除或者是其他结构上的变化。通俗来说就是在运行时代码可以根据某些条件改变自身结构。主要动态语言…

geemap学习笔记027:遥感影像指数计算,并依据研究区进行裁剪

前言 GEE最常用的一个功能就是指数的计算&#xff0c;并且可以进行较大范围的计算&#xff0c;然后根据感兴趣区进行裁剪。常见的指数有归一化差异植被指数 (NDVI)、增强植被指数 (EVI)、叶面积植被指数&#xff08;LAI&#xff09;、归一化差值水体指数(NDWI)、归一化建筑指数…

xcode 修改 target 中设备朝向崩溃

修改xcode的target中的设备朝向导致崩溃。 从日志上看好像没有什么特别的信息。 之后想了想&#xff0c;感觉这个应该还是跟xcode的配置有关系&#xff0c;不过改动的地方好像也只有plist。 就又翻腾了半天plist中的各种配置项&#xff0c;再把所有的用户权限提示相关的东西之…

Unity中Shader URP最简Shader框架(ShaderGraph 转 URP Shader)

文章目录 前言一、 我们先了解一下 Shader Graph 怎么操作1、了解一下 Shader Graph 的面板信息2、修改Shader路径3、鼠标中键 或 Alt 鼠标左键 移动画布4、鼠标右键 打开创建节点菜单5、把ShaderGraph节点转化为 Shader 代码6、可以看出 URP 和 BuildIn RP 大体框架一致 二、…

gitee上传步骤

上传 1. 到具体要上传的文件目录 2. 右击git Bash Here 初始化仓库&#xff1a;git init 3. 添加文件 添加所有文件 : git add . &#xff08;注意这里有个点&#xff09;添加具体文件&#xff1a; git add test.md 4. 添加到暂存区 git commit -m 暂存区 5. 将本地代…

内网渗透实录1

记录一下tryhackme的Holo的靶场完成过程。和原本作者思路和工具不太一样&#xff0c;用自己的思路打了一下&#xff0c;更加优雅方便&#xff08;实际上是自己太懒了&#xff09;&#xff0c;某些自己不懂的地方部分更加细节展开。中途太忙断了好久&#xff0c;还断网心态崩了&…

SpringBoot接口开发

一、springboot官方demo开发 依赖包和父:pom.xml<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.14</version></dependency&g…

TCP/IP详解——数据转发过程

文章目录 一、数据转发过程1. TCP封装&#xff08;传输层封装&#xff09;2. IP封装&#xff08;网络层封装&#xff09;3. 查找路由4. ARP&#xff08;数据链路层封装&#xff09;5. 以太网封装6. 数据帧转发过程7. 数据帧转发过程8. 数据包转发过程9. 数据帧解封装10. 数据包…

【Docker】WSL 2 上的 Docker 搭建和入门

▒ 目录 ▒ &#x1f6eb; 导读开发环境 1️⃣ 安装安装Docker Desktop for Windows 2️⃣ 环境配置3️⃣ hello world第一次运行再次运行分析总结 &#x1f4d6; 参考资料 &#x1f6eb; 导读 开发环境 版本号描述文章日期2023-12-14操作系统Win11 - 22H222621.2715WSL2 C:…

TypeScript【枚举、联合类型函数_基础、函数_参数说明 、类的概念、类的创建】(二)-全面详解(学习总结---从入门到深化)

文章目录 枚举 联合类型 函数_基础 函数_参数说明 类的概念 类的创建 枚举 枚举&#xff08;Enum&#xff09;类型用于取值被限定在一定范围内的场景&#xff0c;比如一周只能有七天&#xff0c;颜色限定为红绿蓝等 枚举例子 枚举使用 enum 关键字来定义 enum Days {…

uniapp框架——初始化vue3项目(搭建ai项目第一步)

文章目录 ⭐前言&#x1f496; 小程序系列文章 ⭐uniapp创建项目&#x1f496; 初始化项目&#x1f496; uni实例生命周期&#x1f496; 组件生命周期&#x1f496; 页面调用&#x1f496; 页面通讯&#x1f496; 路由 ⭐搭建首页⭐form表单校验页面⭐总结⭐结束 ⭐前言 大家好…

Chart 10 OpenCL 优化教学

文章目录 前言10.1 博客10.2 Sample Code10.2.1 算法优化10.2.2 Vectorized load/store10.2.3 image 代替 buffer 10.3 Epsilon Filter10.3.1 初始化实现10.3.2 Data pack optimization10.3.3 Vectorized load/store optimization10.3.4 Further increase workload per work it…