在VUEJS中使用require引入动态图片


在 VUEJS 中使用require引入包含变量的图片时,一般会出现如下警告:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

这是因为 vue 在编译的时候并没有数据传入,会因找不到上下文环境而查找失败。

此时可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数:

  • 一个要搜索的目录
  • 一个标记表示是否还搜索其子目录
  • 以及一个匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context() 。

语法如下:

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

示例:

require.context('./test', false, /\.test\.js$/);
// (创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。

require.context('../', true, /\.stories\.js$/);
// (创建出)一个 context,其中所有文件都来自父文件夹及其所有子级文件夹,request 以 `.stories.js` 结尾。

详细参见文档


Author: star
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source star !
 Previous
同时使用多个git账号 同时使用多个git账号
一、清除本地的原有账户信息# 查看是否存在全局配置 git config --global --list # 存在则直接清除全局配置信息 git config --global --unset user.name git config -
2020-03-21 star
Next 
在 windows 中安装 RockrtMQ 在 windows 中安装 RockrtMQ
在 windows 中安装 RockrtMQ1、下载安装包进入官网,选择最新版本,并下载二进制安装包。例如当前最新版本为 4.7.0 2、配置环境解压安装包到指定位置: 例如:D:\App\Eva\rocketmq-all-4.7.0-b
2020-03-19 star
  TOC