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帮我们去解析，还是可以正常打包上线的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于非Vuex实现的登录状态判断封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了Vue中provide和inject的使用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要为大家详细介绍了iview实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要为大家详细介绍了Vue3如何结合Springboot实现前后端防抖增强功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-06-06
这篇文章主要介绍了Vue Echarts渲染数据导致残留脏数据的问题处理,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
今天小编就为大家分享一篇vue.js 双层嵌套for遍历的方法详解, 类似php foreach()，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-03-03
为什么要在标题里加上一个业务数据的上报呢，因为在咱们前端项目中，可上报的数据维度太多，比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。2021-05-05
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue选取本地图片，自定义裁切图片比例 vue-cropper,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最新评论