如何在reactjs中加载网络图像网址？

Question

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

我一直在尝试使用以下代码

在reactjs中加载外部图像

找不到模块：无法解决＆＃39; https://www.example.com/logo.png＆＃39;在＆＃39; / Users / admin / website1 / website / src＆＃39;

我的代码如下：

<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>

Answer 1

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

如果是这种情况，则可能需要将assets目录添加到配置中。如果您使用的是工具，可以在图片here上找到webpack的指南。

否则，提供更多背景信息。

Answer 2

你的<img/>实际上并不是一个DOM元素，所以只给它一个字符串就不行了。它是一个JSX属性表达式，因此您需要围绕实际字符串使用花括号才能使其工作。

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