javascript - React依赖模块正在父模块中寻找图像源

Question

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

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

下面是代码片段。

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

Answer 1

如果您的项目使用 CRA 引导，则需要导入镜像。

See adding images in CRA :

With webpack, using static assets like images and fonts works similarly to CSS.

You can import a file right in a JavaScript module. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.

对于图像路径:

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>
  );
}