Javascript 如何正确加载图像路径？

我的文件夹结构如下所示

src/
    components/
        Icon/
            Icon.js
            Style.js

    images/
        apple.svg
        google.svg
        facebook.svg
        index.js

我想导出“images/index.js”中images文件夹下的图像路径

我试过下面这样的东西

images/index.js 我想在“/Components/Icon/Style.js”中加载这些图像的路径，如下所示

src/
    components/
        Icon/
            Icon.js
            Style.js

    images/
        apple.svg
        google.svg
        facebook.svg
        index.js

Style.js 但是，我无法加载图像的路径

正确的方法是什么

不可能吗

export const apple='/apple.svg'

这是我加载图像路径的唯一方法吗？
images/index.js
Style.js
这应该是可行的，而且在我看来代码也很干净！

推荐
向服务器请求每个“图标”的图像感觉非常昂贵。
相反，由于您可以访问资源，我将采用以下结构：

src/
    components/
        Icon/
            Apple.js
            Google.js
            Facebook.js

Facebook.js
从“React”导入React；
函数（{width='266'，height='266'}={}）{
返回(
);
}
导出默认Facebook；

优点：


无网络请求
可重用图标
可使用状态（颜色、形状等）进行自定义
你在facebook上的例子看起来应该有用。您有一个导出（非默认）和一个命名导入。您得到的错误是什么？我没有得到任何错误，但是当我在开发人员工具中检查它时，加载的路径不正确。背景：url（./facebook.svg）我导出的只是图像路径的字符串，所以发生了。。。export const closeBt='./closeBt.svg'；好的，问题不在于导入不起作用，而是基于文件的位置，您的相对路径不再正确。您需要使用站点根相对路径，如下所示：这里可能有一个更相关的stackoverflow问题：
import apple from './apple.svg';
import google from './google.svg';
import facebook from './facebook.svg';

export {
  apple,
  google,
  facebook
}

import styled from 'styled-components';
import { apple, google, facebook } from '../../images';

const Icon = styled.i`
    background: blah blah blah  
`;

export default Icon;

src/
    components/
        Icon/
            Apple.js
            Google.js
            Facebook.js

import React from 'react';

function Facebook({ width = '266', height = '266' } = {}) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 266.893 266.895" enableBackground="new 0 0 266.893 266.895">
      <path
        fill="#3C5A99"
        d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812  c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225  H248.082z"
      />
      <path
        fill="#FFFFFF"
        d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935  l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585  v99.803H182.409z"
      />
    </svg>
  );
}

export default Facebook;