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

相关推荐

  1. vue3+ts 引入 json-editor-vue3

    2023-12-15 15:30:03       22 阅读
  2. easyexcel解决

    2023-12-15 15:30:03       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-15 15:30:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-15 15:30:03       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-15 15:30:03       82 阅读
  4. Python语言-面向对象

    2023-12-15 15:30:03       91 阅读

热门阅读

  1. Linux---终端命令格式的组成

    2023-12-15 15:30:03       54 阅读
  2. Android Binder 调用栈

    2023-12-15 15:30:03       50 阅读
  3. 如何测试Nginx防盗链是否生效?

    2023-12-15 15:30:03       57 阅读
  4. 《Kotlin核心编程》笔记:面向表达式编程

    2023-12-15 15:30:03       57 阅读
  5. 浅谈EC防御技术

    2023-12-15 15:30:03       61 阅读
  6. 开发人员必用的Linux命令,建议收藏

    2023-12-15 15:30:03       67 阅读
  7. nvm动态管理node.js

    2023-12-15 15:30:03       69 阅读
  8. MySQL高可用实战(MHA)

    2023-12-15 15:30:03       45 阅读
  9. 自定义kafka客户端消费topic

    2023-12-15 15:30:03       64 阅读
  10. C++入门【5-C++ 常量】

    2023-12-15 15:30:03       49 阅读
  11. Canny边缘检测算法

    2023-12-15 15:30:03       67 阅读
  12. Android Studio报Gradle问题解决思路

    2023-12-15 15:30:03       61 阅读