如何使用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

在一个简单的Gatsby测试中遇到类似的bug。我的道路就像：

解决@Kafo说：

1. 为您的图像指定一个命名导入
2. 用花括号包裹它作为src的值

我的结果：