Javascript 如何在不同路径的组件中实现图像变量

我的React项目的结构如下：

-images/
 |
  -image.svg
-components/
 |
  -SomeComponent1.js
  -some_folder/
   |
    -SomeComponent2.js
-utils
 |
  -utils.js

我在

utils.js中拥有的内容：

import image from "../images/image.svg";

export const ImageComponent = props => {
        return (
              <img src={image}/>
            )
        );
    };


从“./images/image.svg”导入图像；
导出常量ImageComponent=props=>{
返回(
)
);
};

我在components
SomeComponent1
和
SomeComponent2
中使用了上面的
ImageComponent
（IRL我有更多的组件），但它不起作用，因为这些组件中的图像源路径不同（
。/../images/image
和
。/../images/images
）

如何实现此逻辑？
您可以使用
require
加载图像

如果路径是相对于ImageComponent的，则只能在ImageComponent中使用
require
，如下代码所示

export const ImageComponent = ({ src }) => {
  return (
      <img src={require(src)} alt="" />
  );
};
// Load component as below
<ImageComponent src={"../images/image.svg"} />

只需确保图像与调用它们的文件相对。
请使用绝对路径？@ChristianFritz you's about
D:\some\way\to\project\src\images\image
？O_oabsolute to the project root应该足够了，因此在您的例子中可能是
/images/image.svg
。但是我还是不知道这些东西在windows上是如何工作的。不，我只想在
utils.js
文件中插入导入的图像，然后在
SomeComponent1.js
和
SomeComponent2.js中加载组件
src={require（../images/image.svg”）}
，而不使用您建议的道具
export const ImageComponent = ({ src }) => {
  return (
      <img src={src} alt="" />
  );
};

// Load component as below
<ImageComponent src={require("../images/image.svg")} />