如何使用source链接react.js中的图像

Question

我正在使用react.js网站，我想将图片（徽标）链接到网站。请参阅文件夹结构

我的页脚徽标的图片代码是

<img className="img-responsive" src="public/assets/image/img/footer-logo.jpg" alt="logo"/>

但是当我运行它时，网站上看不到图像。任何解决方案??

Answer 1

你的图像src url需要相对于你正在使用它的文件。所以你需要像../../public/assets/image/img/footer-logo.jpg一样使用它。

同样在做出反应时，您需要将源包含在大括号中

<img className="img-responsive" src={"../../public/assets/image/img/footer-logo.jpg"} alt="logo"/>

此外，如果您使用的是webpack，则需要使用带有图像src url的require

<img className="img-responsive" src={require("../../public/assets/image/img/footer-logo.jpg")} alt="logo"/>

我希望它有所帮助：）

Answer 2

如果您正在使用webpack并假设您处于图像中显示的其中一个组件中，请执行以下操作：

import logo from '../../public/assets/image/img/foorter-logo.jpg';
<img className="img-responsive" src={logo} alt="logo"/>

如果你想坚持你所拥有的，你可以做到：

<img className="img-responsive" src="../../public/assets/image/img/footer-logo.jpg" alt="logo"/>

Answer 3

在一个简单的盖茨比测试中遇到了类似的错误。 我的道路就像：

按照@Kafo所述解决：

1. 为您的图片命名导入
2. 将花括号括起来作为src的值

我的结果：