前端es6 require动态引入图片报错Error: Cannot find module

在React-native中，Image组件的source如果使用require方式引入图片资源，则必须使用静态的字符串，不能使用变量，因为require是编译时执行的，而非运行时执行！

于是React-native为Image组件的source提供了另外一种使用变量的方式source={{ uri: item.picture }}，也支持如下写法：

let source = '';switch (item.resultType) {case 0:source = require('../../assets/app/ic_dsh.png')break;case 1:source = require('../../assets/app/ic_sptg.png')break;case 2:source = require('../../assets/app/ic_bohui.png')break;case 3:source = require('../../assets/app/ic_zuofei.png')break;}

        <Imagestyle={{position: 'absolute',zIndex: 10,top: OASize(0),right: OASize(5),width: OASize(44),height: OASize(16),}}// resizeMode="contain"source={source}/>

下面来说说ES6的require

关于es6的require添加动态变化的路径

直接静态写死是不会有错误的：

let imgUrl = require('../images/a.png');

但是如果你尝试着：

var imgUrl = "../images/b.jpg";let img = require(imgUrl);

或者这样动态变化：

require(`../../assets/images/${showAllExpended?'unfold':'up'}.png`

那就只能凉凉的报错咯（因为require它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊）：

PS：由于我浏览器缓存我复现不了情况，就取一张别人的报错图片来解释一下吧：

而require里的正确的格式必须是path

可以这么写：

var imgUrl = "a";let img = require('../images/'+imgUrl+'.jpg');

当然最好这么写：

var imgUrl = "b.jpeg";let img = require('../images/'+imgUrl);

前端es6 require动态引入图片报错Error: Cannot find module相关推荐

vue require动态路径图片报错_Vue 动态生成路由结构
通常我们比较常用的vue组件加载方式就是通过import引入文件,如:路由懒加载 .静态的import. 一般情况下还是推荐使用import方式引入的,因为这更容易从Tree_shaking 及一些分 ...
vite：vue中引入图片报错require is not defined
问题在 vite 项目中这样引入图片报错 images: require('../assets/images/right.png') 改为 images: new URL('../assets/im ...
Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错一.import导入图片方法第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
nodejs express 启动报错:Error: Cannot find module 'xxx'
nodejs express 启动报错:Error: Cannot find module 'xxx',这是因为缺少模块的引用. 比如我在代码中使用了'express-session',但是却没有在 ...
VUE项目报错Error Cannot find module ‘webpacklibRuleSet‘_解决
1.报错 Error: Cannot find module 'webpack/lib/RuleSet' 在第一个问题的时候还试过把node_modules文件夹和package-lock.json文 ...
启动react项目时失败，报错Error: Cannot find module
拷贝react项目到本地 npm run 运行项目时,报错Error: Cannot find module - 解决办法:一次性安装模块 sudo npm i 或者先安装yarn,利用yarn安装 ...
uniapp项目启动报错Error: Cannot find module ‘webpack/lib/RuleSet
这两天在看uniapp的项目,创建uniapp项目有两种方式,第一通过Hbuilder直接新建项目,第二是通过cli命令创建,两种方式创建的uniapp的项目目录是不一样的. 第一Hbuilder创建 ...
cocos creator require报错Error: Cannot find module ‘./xx‘
出现此错误,一般的情况包括: 1.文件引用路径不正确,也是报错的字面意思,找不到文件,所以报错.这个很容易修复. 2.项目文件夹与cocos creator的CocosDashboard.exe放在同 ...
若依,报错 Error: Cannot find module ‘@/views/system/user/index
出现报错:在自己本地正常不报错,打包到测试服上,开始报错,左侧菜单栏点不开,一直在加载中... 报错信息如图所示原因:webpack4 不支持变量方式的动态 import ,新版本的使用 requi ...

前端es6 require动态引入图片报错Error: Cannot find module

下面来说说ES6的require

前端es6 require动态引入图片报错Error: Cannot find module相关推荐

最新文章

热门文章