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

Question

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

我一直在试图加载reactjs外部图像，使用下面的代码

模块未发现：在“/用户/管理员/ WEBSITE1 /网站/ 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> 

图像210

Answer 1

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

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

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

Answer 2

您的<img/>实际上并不是一个DOM元素，所以只是给它一个字符串将不起作用。这是一个JSX属性表达式，因此您需要在实际字符串周围使用花括号来使其起作用。

类似的问题已经在这里找到答案： https://stackoverflow.com/a/26065890