React项目无法在Chrome渲染PNG图片，求替代解决方案

• 导入图片模块（推荐）
  在组件文件中直接导入目标图片，将导入的变量作为img标签的src值使用，webpack会自动处理资源路径：

  import profilePic from './assets/avatar.png'; // 替换为你的图片相对路径
  
  function UserProfile() {
    return <img src={profilePic} alt="用户头像" />;
  }
  

  这种方式适用于固定路径的图片，能避免Chrome中出现的路径解析异常，同时确保资源被正确打包。

• 动态加载图片（适用于路径需变量控制的场景）
  如果需要根据变量动态切换图片，使用require加载，注意路径必须包含固定前缀（webpack需要提前识别资源范围）：

  function ProductCard({ productId }) {
    // 假设图片命名规则为 product-{id}.png
    const productImage = require(`./products/product-${productId}.png`).default;
    return <img src={productImage} alt="产品图" />;
  }
  

• 自定义webpack配置（非CRA项目）
  如果项目是自定义webpack搭建的，确保配置了资源处理规则，让webpack能正确打包图片：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          type: 'asset/resource', // webpack 5+ 推荐使用asset模块
          // 若使用webpack 4及以下，可使用file-loader：
          // use: ['file-loader']
        },
      ],
    },
  };
  

  配置后重新打包项目，图片会被输出到指定的打包目录，生成正确的访问路径。

内容的提问来源于stack exchange，提问作者Patrick O'Rourke