React渲染页面时如何正确显示本地加载图片

本地图片无法显示的核心原因是：写在index.html中直接生效的loader样式不会经过webpack/Vite等React项目打包工具的资源解析流程，./src/images/image.svg是源码目录下的相对路径，项目打包时src目录下的静态资源会被重命名、添加哈希值、调整存放路径，最终部署时这个路径根本对应不到实际的图片文件；而外网图片是绝对地址，不存在路径解析转换的问题，所以可以正常展示。

可直接选用以下两种无额外逻辑成本的方案实现需求：

• 方案一：将SVG图片转为内联Data URI
  直接把SVG内容转成data格式内联写在CSS中，完全不依赖外部资源路径，不会被打包流程影响，加载速度更快，不需要额外发起资源请求。示例代码：

  .loader:empty {
    position: absolute;
    top: calc(50% - 4em);
    left: calc(50% - 4em);
    width: 6em;
    height: 6em;
    /* 替换成你自己的SVG转码后的内容即可 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231677ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
    background-size: 100% 100%;
  }
  

• 方案二：将加载用图片放到public静态目录
  把需要用到的本地图片从src目录移到项目的public静态资源目录下，该目录下的文件会被打包工具原样拷贝到输出目录根路径，不会被重命名或修改路径，CSS中直接以根路径引用即可：
  1. 把image.svg放到public/images/路径下
  2. 样式中引用路径改为根路径开头：

  .loader:empty {
    position: absolute;
    top: calc(50% - 4em);
    left: calc(50% - 4em);
    width: 6em;
    height: 6em;
    background-image: url("/images/image.svg");
    background-size: 100% 100%;
  }
  

  注意：如果项目部署在域名的子路径下，需要把路径前缀替换为项目对应的base路径。

针对路由页加载逻辑重复的问题，直接使用:empty伪类的方案即可完全避免：该方案不需要编写任何React侧的hooks逻辑，只要React应用完成初始渲染、root节点被注入内容，:empty伪类就会自动失效，加载样式自动隐藏，不管后续路由怎么切换，首次进入页面的加载效果都能正常生效，不需要在每个路由组件重复编写逻辑。

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