Reactjs 需要变量中的图像 url 不起作用答案

【问题标题】：Reactjs require image url in variable is not workingReactjs 需要变量中的图像 url 不起作用
【发布时间】：2018-03-04 15:42:03
【问题描述】：

奇怪的问题

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

将图像目录作为字符串放入可以正常工作（我注释掉的部分），但是一旦我将它放入变量中，它就会给我错误“找不到模块”。“”

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

有人知道为什么吗？

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

【问题讨论】：

当您说“工作”和“不工作”时，您能否提供更多关于您如何使用该对象的信息？ background 是传递给 img 元素，还是用于设置 CSS 与样式属性的对象？从字符串类型转换到何时调用 require 并收集变量，它可以是任意数量的事情。
@JessB 嗨，Jess，问题似乎出在我使用“newelement”对象之前。问题似乎是带有字符串的变量上的 require() 方法，因为它仅在 require 方法中包含字符串。我更新了一个失败的例子

标签： node.js file require

【解决方案1】：

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');
};

【讨论】：

这太完美了！

【解决方案2】：

如果您希望在您的 React Web 应用程序上使用图像，您可以使用下一个代码

直接在html标签中使用时，但如果可以在java脚本的一部分中使用，则必须使用const image = require('../Assets/image/03.jpg')，并在示例标签之间像{image}这样调用这个常量

【讨论】：

这不是动态的
是的，但是如果您希望动态，您必须使用 setState 并制作一些 json 数据文件，并将其与事件 onClick 连接。无论如何，最好的方法是 require('../Assets/image/03.jpg') 因为这是在您的网页上查找图片的安全方法。