React中CSS url()函数为何会破坏本地图片路径？

你遇到的问题核心是React在处理file://协议的本地路径时，自动对路径进行了错误的URL编码，导致路径乱码无法被正确识别。结合你的描述，我整理了几个可行的解决方案：

• 优先使用项目内的相对路径/公共目录路径
  如果你的图片可以放到React项目的public文件夹下（比如public/images/0/22.jpg），直接用根相对路径即可，React会自动解析到正确的资源位置，完全避免file://的问题：

  <div style={{ backgroundImage: "url(/images/0/22.jpg)" }}></div>
  

  这种方式也是React官方推荐的静态资源引用方式，既安全又不会出现编码异常。

• 将本地图片作为模块导入使用
  如果图片必须放在本地磁盘的其他位置，你可以在组件里直接导入图片文件，让Webpack帮你处理路径：

  import backgroundImage from 'F:/images/0/22.jpg';
  
  function MyComponent() {
    return (
      <div style={{ backgroundImage: `url(${backgroundImage})` }}></div>
    );
  }
  

  Webpack会把这张图片作为资源处理，生成正确的访问路径，不会出现手动写file://带来的编码错误。

• 检查路径中的特殊字符
  你控制台里出现的%EF%BF%BD是一个替换字符，说明原始路径里可能存在不可见的特殊字符（比如全角符号、隐藏的非ASCII字符）。可以检查一下你的图片路径和文件名，尽量使用纯英文、数字和半角符号，避免特殊字符导致的编码异常。

• 避免在HTTP环境下使用file://协议
  React开发环境通常运行在HTTP服务器（比如localhost:3000），而浏览器有安全策略限制HTTP页面访问file://协议的资源，这可能也是路径解析异常的原因之一。尽量通过项目资源或者静态服务器来提供图片，而不是直接访问本地磁盘文件。

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