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

linh0801
10,054 阅读1分钟

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

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

<template>
<div>
<img  :src= "require('@/assets/images/banner.png')" />
</div>
</template>

在只渲染一张图片的时候这样写是符合我的需求的，而且成功的加载了图片出来。但是我要实现个的是在一个大的集合中遍历去加载每一项的图片，此时我将数据存放在一个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
     }
    }
}

遍历数据集合

<template>
<div  v-for=" item of jsonData" >
<img  :src= "require(`${item.imagePath}`)" />
</div>
</template>

结果报错了： 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
<template>
<div  v-for=" item of jsonData" >
<img  :src= "item.imagePath" />
</div>
</template>

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

总结：

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

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

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

avatar
文章
阅读
粉丝