React项目中无法加载src目录下Images文件夹的jpg、svg图片如何解决？

问题原因 #

直接在img标签src属性填写相对路径引用src目录下的图片不符合React的静态资源加载规则，React默认的打包工具只会处理通过import引入的src目录内资源，直接写的相对路径在打包后会失效，导致图片找不到。

可行解决方法 #

• 方案1：保持Images文件夹放在src目录下，提前import引入图片后再使用
  修改后的代码如下：

import React from 'react';
import './Banner.css';
// 提前导入需要使用的图片资源
import bannerBg from '../Images/banner.bg.jpg';
import partyIcon from '../Images/party-icon.svg';

const Banner = () => {
  return (
    <div className="banner">
      <img src={bannerBg} alt="banner" />
      <div className="text">
        <img src={partyIcon} alt="party" />
        <h3>Let's The Fun Begin!</h3>
        <p>Thanks for your order, we'll have it with you as soon as possible.<br></br>
        Your order number is #10293838 and a confirmation email has been sent to the address provided.</p>
        <p>Order Even Faster in Future</p>
        <button className="button">CREATE AN ACCOUNT</button>
      </div>
    </div>
  );
}

export default Banner;

• 方案2：将Images文件夹移动到项目根目录的public文件夹下，直接使用绝对路径引用
  不需要修改js代码的import部分，只需要把img标签的src改为如下写法即可：

<img src="/Images/banner.bg.jpg" alt="banner" />
<img src="/Images/party-icon.svg" alt="party" />

如果项目后续部署在域名的子路径下，需要加上PUBLIC_URL前缀避免路径错误：

<img src={`${process.env.PUBLIC_URL}/Images/banner.bg.jpg`} alt="banner" />

内容的提问来源于stack exchange，提问作者Elsa