记录使用require 动态引入图片，导致cannot find module '文件路径'的解决过程

2023-07-02 15:29| 来源: 网络整理| 查看: 265

图片在vue中的的导入方式，在网上一搜一大把，我这里不做介绍。主要记录一下我自身遇到的问题，和解决方法。如果对你有帮助的话，就给我点个赞吧！有问题可以留言，一起交流！

在一次工作中，我使用标签来加载图片，框架vue2，图片存放在assets 目录下。刚开始我是使用require 的方式动态导入图片，

复制代码

在只渲染一张图片的时候这样写是符合我的需求的，而且成功的加载了图片出来。但是我要实现个的是在一个大的集合中遍历去加载每一项的图片，此时我将数据存放在一个json文件中,data.json

[ { "imagePath": "@/assets/images/banner.png" }, { "imagePath": "@/assets/images/banner2.png" }, { "imagePath": "@/assets/images/banner3.png" }] 复制代码

在页面中导入json数据

import jsonData from '@/src/json/data.json' export default { data () { return { jsonData } } } 复制代码

遍历数据集合

复制代码

结果报错了： cannot find module '@/assets/images/banner.png',我心里很是纳闷为什么会报这样的问题，之前路径直接写死在require里面就可导入。首先看一下我的wenpack的配置：

{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } } 复制代码

于是我在网上参考其他博客，找到了原因：

存放在asserts 的资源会被webpack打包通过Url-loader 生成chunk 的文件名称存放在/static/img/ 这个路径下（具体要看本地的具体配置路径，此处仅参考）在require中直接写死图片路径的时候，webpack在打包的时候也将原有的路径'@/assets/img/banner.png',转换成了'/static/img/banner.[chunk].png'，require 是在运行时进行引入的，因此，此时可以/static/img/下找到这个图片 require使用变量来引入图片时，vue在渲染的时候此时传给require 的是'@/assets/images/banner.png',在打包结果中，根本就找不到这个图片的模块

解决方法：

将图片移动到static目录下 data.json修改图片的路径 [ { "imagePath": "/static/images/banner.png" }, { "imagePath": "/static/images/banner2.png" }, { "imagePath": "/static/images/banner3.png" }] 复制代码页面中使用 :src="变量"，不再使用require 复制代码

最终，图片可以正常的显示出来了

总结：

require 是动态运行时引入资源的，加载的是webpack预编译后的文件路径

assets 下的文件适合存放经常变动的资源文件，webpack打包的时候，为了保证新老文件不产生冲突，会重新命名文件名称

static 下的文件，webpack会借助CopyWebpackPlugin这个插件将图片文件都复制到打包文件中去

【本文地址】

公司简介

联系我们