React.js中PNG图片在网页无法显示问题求助

以下是针对你遇到的问题的几种可行解决方案：

• 改用import方式引入图片
  这是React项目中最稳妥的静态资源引入方式，兼容性好且不易出错：

  // 在组件顶部导入图片
  import footerImage from "../../../Assets/Home/footer-image.png";
  
  // 在JSX中使用
  <img src={footerImage} alt="页脚图片" />
  

• 移除require后的.default属性
  部分React打包工具（如旧版Create React App）中，require()直接返回图片的路径字符串，不需要访问.default属性，试试修改代码：

  <img src={require("../../../Assets/Home/footer-image.png")} alt="加载失败" />
  

• 检查打包工具的静态资源配置
  如果你用自定义Webpack配置，需确保已正确配置图片处理规则：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          type: 'asset/resource', // Webpack 5+ 推荐的资源处理方式
        },
      ],
    },
  };
  

  若使用Vite，默认已支持PNG等静态资源，无需额外配置，但要确认路径拼写无误。

• 将图片放入public目录引用
  把图片移到项目根目录的public文件夹下（比如public/Assets/Home/footer-image.png），然后用绝对路径引用：

  <img src="/Assets/Home/footer-image.png" alt="页脚图片" />
  

  这种方式适用于不需要打包工具处理的静态资源，路径直接对应打包后的根目录。

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