代码之家 › 专栏 › 技术社区 › Ruan

变量中的Reactjs require image url不工作

require file node.js

Ruan · 技术社区 · 6 年前

奇怪的问题

我在源目录中动态地包含图像的路径。

将映像目录作为字符串放入可以很好地工作(我注释掉的部分),但一旦我将其放入变量中,就会出现错误“找不到模块”。“”

   var imageDir="assets/img/MyImage.png";
  --Working     // const imageData= require('assets/img/MyImage.png');
  --Not Working    const imageData= require(imageDir);

有人知道为什么吗?

同样的ish问题 Here 很遗憾没有回答

2 回复 | 直到 6 年前

Carr 4 年前

Webpack需要知道在编译时要捆绑哪些文件,但表达式(变量)的实际路径值只能在运行时给定,您需要 require.context :

/* If the structure is like:

    src -
         |
          -- index.js (where these codes are deployed)
         |
          -- assets - 
                     |
                      --img
*/  

      
let assetsPath = require.context('./assets/img', false, /\.(png|jpe?g|svg)$/); 

// See where are the images after bundling.
// console.log(assetsPath('./MyImage.png'));

// You can put all the images you want in './assets/img', and access it. 
var newElement = {
    "id": doc.id,
    "background": assetsPath('./MyImage.png');
};

Miodrag Trajanovic 6 年前

如果希望在react web应用程序上使用图像,可以使用下一个代码

当直接在html标记中使用时,但如果可以在java脚本的一部分中使用,则必须使用 const image = require('../Assets/image/03.jpg') 把这个字母叫做常数 {image} 示例标记之间

推荐文章

7BeholdeR7 · 文件夹的重量超过其中的文件(六倍)

2 年前

Clownpiece · 如何在python 3.8中反转txt文件?[已关闭]

2 年前

ColorfulYoshi · 如何在Tkinter中只打开一种格式的文件

2 年前

Kemper Lee · JAVAutil。扫描仪拒绝接受下一个(或任何)输入(已解决)

2 年前

Tomás Jullier · 我需要用python替换SQL文件中的某个数字

2 年前

ilteris · 为什么程序在fscanf后崩溃

2 年前

Peaceful · 使用fscanf读取C中具有未知行数的文件

2 年前

NOCi · 如何将Tensorflow的结果记录到CSV文件

2 年前

Oakzeh · 如何在字符串索引之前读取文件并删除字符

2 年前

Harjinder Singh · 将文件附加到Netsuite中的记录

2 年前