React依赖模块正在父模块中查找图像源

Question

我有一个页脚React模块，它将作为依赖项安装在其他几个项目中。

当尝试使用页脚模块内的图像元素时，它会尝试在父模块中查找图像源，而不是在自己的/resources/img文件夹中。

下面是代码片段。

<img className="footer-dropdown" src="/resources/img/footer_arrow_default.svg"/>

Answer 1

如果您的项目使用CRA启动，则需要导入图像。

请参阅在CRA:中添加图像

使用webpack，可以使用图像和字体等静态资产类似于CSS。

您可以直接在JavaScript模块中导入文件。这告诉webpack将该文件包含在捆绑包中。与CSS导入不同，导入文件会给您一个字符串值此值是您可以代码中的引用，例如作为图像的src属性或PDF链接的href。

对于图像路径：

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;

至于渲染svg:

import { ReactComponent as Logo } from './logo.svg';
function App() {
return (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
}