如何在 React 中动态请求图像（使用 GET 请求获取图像）答案

【问题标题】：How to dynamically require images in React (using GET request to fetch images)如何在 React 中动态请求图像（使用 GET 请求获取图像）
【发布时间】：2019-02-13 15:21:37
【问题描述】：

我有每个用户的个人资料照片。

我从我的数据库列中获取这些图片paths。

然后将它们存储在state。

const PROFILE_INFO = this.state.PROFILE_INFO; <img src={require(PROFILE_INFO.ImageURL)} /> // ImageURL /stored_images/b234afaf-ccea-599f-9b3b-3cbf2d669b21.jpg

问题在于这不起作用，因为require() 只接受STATIC 路径。

当我使用时会发生这种情况

<img src={../..${PROFILE_INFO.ImageURL}} />

【问题讨论】：

不，当您将require 与不是可以解析用于捆绑目的的字符串一起使用时会发生这种情况。您不能将 require(someVariable) 与 webpack 一起使用，因为 someVariable 可以是任何东西，因此 webpack 无法打包它并出错。话虽如此，看起来您已经拥有PROFILE_INFO.ImageURL 的 URL，那么为什么不直接使用它呢？（另外，在 JS 命名约定中，常量都是大写字母，类以大写字母开头，函数/变量以小写字母开头。遵循该约定总是好的）
我不能直接使用它，因为它是一个静态 url。它是每个配置文件的唯一图像名称。
好的，但是你为什么要使用require呢？因为这是加载节点模块/包的 node.js 指令。如果它只是一个字符串，请不要使用 require，根据 charlietfl 的回答。使用require 绝对不是将图像加载到 React 应用程序的方式。如果您的 JSX 用于 DOM/HTML 目标，请将 src 属性模板化为字符串。结束。不要永远将它们捆绑在一起，那太疯狂了。每次更新图像源时，您都必须重新构建整个应用程序包。那太疯狂了。
尝试仅使用字符串插入图像不起作用。我得到一个损坏的图像图标
cool：你得到了什么error？打开开发工具，查看控制台，查看网络选项卡，然后确定您的字符串中的哪个位置有错字。 “它不工作”不是问题：它总是工作，正是它应该的方式。您看到“它没有达到我的预期”，因此请应用标准程序并确定它的作用，以便您获得确定如何修复它所需的信息。

标签： node.js reactjs require

【解决方案1】：

您不需要require()。您只需要 url 字符串

<img src={PROFILE_INFO.ImageURL} />

【讨论】：

在 React 中这就是你插入图片的方式。
定义“不起作用”。图片与页面是否在同一域中？您在浏览器开发工具网络中看到了什么？
图像物理存储在一个非常靠近的文件夹中。我编辑了使用您的解决方案时会发生什么的帖子。
如果我在src 中使用../../stored_images/b234afaf-ccea-599f-9b3b-3cbf2d669b21.jpg 它可以工作，而这实际上是存储在我的object PROFILE_DETAILS 中的内容。这是一个常见问题，但我找不到任何解决方案。