Nuxt3动态导入图片(本地)src实现过程
我的解决路程
反正踩了很久的坑，解决方法写在最下面，直接看下面即可
- firstDefaultImg.value = `~/assets/tswstyle/images/company.png`;本地和打包后都看不到图
- firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;本地看的到，打包后无效
解决
写在public下：firstDefaultImg.value = `tswstyle/images/company.png`;
nuxt3 不再支持 require 动态导入资源
直接这样导入，浏览器报错：
ReferenceError: require is not defined
一般引入图片时：
图片在根目录下 assets/tswstyle/images 文件夹下，以下在template模板引入是正确的：
浏览器看到的格式是：
本地开发环境（图片正常显示）：
build打包之后(生产环境)看到的（图片正常显示）：
问题：但是我这个可能需要好几个图片来回替换，不想写在 template 模板中：
我就想直接在 script 内写：
<img :src="firstData.cover ? firstData.cover : firstDefaultImg" alt="" />
const firstDefaultImg = ref(''); //没有图片就用这个默认的图片地址（字符串）
//因为是 tab切换的，所以切换的tab不同，默认图片也不同
switch (active.value) {
case 1:
firstDefaultImg.value = `~/assets/tswstyle/images/company.png`;
break;
case 2:
firstDefaultImg.value = `~/assets/tswstyle/images/govbusCommunication.png`;
break;
case 3:
firstDefaultImg.value = `~/assets/tswstyle/images/Partyactivity.jpg`;
break;
case 4:
firstDefaultImg.value = `~/assets/tswstyle/images/welfare.png`;
break;
case 5:
firstDefaultImg.value = `~/assets/tswstyle/images/recruitImg.png`;
break;
default:
break;
}但是在浏览器中看到的图片地址并没有转化（依然是我写的字符串）：
根据浏览器生成的 _nuxt,我就将赋值地址改为（图片的地址没动，还是在根目录下的assets/tswstyle/images文件夹中）：
firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;
在本地确实能看到图片：
浏览器中：
但是build打包之后，图片显示不出来：
都是以原本的字符串展示（没有解析成对应的地址）
解决方法：图片可以直接搬到 public，根目录下的 public/tswstyle/images 文件夹下：
直接这样写路径即可：
firstDefaultImg.value = `tswstyle/images/company.png`;
本地浏览器（可以自己解析），图片展示没问题：
build打包之后，生产环境下（图片展示没问题）：
浏览器的地址显示：
补充：
坑：引入 public 时，上面这个文件的地址
<img src="index/commerceIntroduce.png" alt="" />
这样引入， npm run dev 可以看到加载的文件，但是run build 打包会出错：
引入public 静态资源还是要用下面这种写法引入：
- 方法一：
<img src="~/public/index/commerceIntroduce.png" alt="" />
- 方法二：
<img :src=" 'index/commerceIntroduce.png' " alt="" />
这个代码，其实是把他动态引入，跟最上面的一样，让vue帮我们去解析，还是可以正常打包上线的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue+highCharts实现可选范围的图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家介绍了vue 长列表数据刷新的实现及思考，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
我们都知道,轮播图组件模板结构通常是ul包裹li的结构,在vue中,li的数量也通常是由后端接口返回的数据决定,下面这篇文章主要给大家介绍了关于vue3封装轮播图组件功能的相关资料,需要的朋友可以参考下2022-11-11
vue-cli是 vue 官方提供的、快速生成 vue 工程化项目的工具，支持创建vue2和vue3的项目，本文给大家详细讲解vue-cli是什么及创建vue-cli项目的方法，感兴趣的朋友跟随小编一起看看吧2023-04-04
vue项目使用高德地图时报错:AMap is not defined解决办法
这篇文章主要给大家介绍了关于vue项目使用高德地图时报错:AMap is not defined的解决办法,"AMap is not defined"是一个错误提示,意思是在代码中没有找到定义的AMap,需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了Vue常见组件间通信方案及典型应用场景详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在开发 Vue 项目时,我们经常需要根据不同的页面动态修改浏览器的页签标题（title）,那么,如何在 Vue 项目中实现动态修改 document.title 呢？本文将介绍三种实用方法,并结合代码示例,助你轻松实现,需要的朋友可以参考下2025-03-03
本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要为大家介绍了Vue3 源码分析reactive readonly实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论