如何在 reactjs 中加载网络图片 url？答案

【问题标题】：How to load network image urls in reactjs?如何在 reactjs 中加载网络图片 url？
【发布时间】：2018-03-15 18:23:42
【问题描述】：

我是 reactjs 的新手，还在学习中。

我一直在尝试使用以下代码在 reactjs 中加载外部图像

找不到模块：无法解析“/Users/admin/website1/website/src”中的“https://www.example.com/logo.png”

我的代码如下：

<div className="profile-userpic">
    <img src="https://www.example.com/logo.png" /> 
</div>

本地存储中的图像在哪里加载成功

<div className="profile-userpic">
        <img src={require('./images/me-icon.png')} />
  </div>

【问题讨论】：

【解决方案1】：

您可能正在使用试图从组件中提取图像的预处理器。

如果是这种情况，那么您可能需要将资产目录添加到您的配置中。你可以在 here 上找到 webpack 的图像指南，以防你正在使用的工具。

否则，请提供更多上下文。

【讨论】：

【解决方案2】：

你的<img/> 并不是一个真正的DOM 元素，所以仅仅给它一个字符串是行不通的。这是一个 JSX 属性表达式，因此您需要在实际字符串周围加上花括号才能使其工作。

这里已经回答了一个类似的问题： https://stackoverflow.com/a/26065890

【讨论】：

字符串作为源在大多数情况下都很好，OP 的错误是Can't resolve <file>，这意味着它试图解决src 属性，从而得出结论，有一些加载程序之间。