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