React项目图片仅显示alt文本不显示图片的问题求助

嘿，我看了你的项目代码，图片只显示alt文本不加载的问题，大概率是路径或者资源配置的问题，咱们一步步来排查解决：

1. 先确认图片路径是否正确（最常见的坑） #

你在Data.js里用require("../../images/svg-1.svg")导入图片，这个路径是相对Data.js文件的位置来写的。先核对下你的项目目录结构：
如果你的结构是这样的：

src/
├── components/
│   └── InfoSection/
│       ├── InfoSection.js
│       └── InfoSection.elements.js
├── pages/
│   └── HomePage/
│       ├── Home.js
│       └── Data.js
├── images/
│   ├── svg-1.svg
│   └── profile.jpg

那这个路径是对的，但如果images文件夹在public下面，或者层级不对，就会导致404。

快速验证：打开浏览器F12的Network标签，刷新页面看图片的请求地址，要是显示404，那肯定是路径错了，调整路径就行。

2. 换一种图片导入方式试试 #

React里用ES6的import导入图片比require更稳妥，不容易出路径问题，你可以修改Data.js：

// 先在文件顶部导入所有需要的图片
import svg1 from "../../images/svg-1.svg";
import svg2 from "../../images/svg-2.svg";
import profileImg from "../../images/profile.jpg";

// 然后在对象里替换img的值
export const homeObjOne = {
  primary: true,
  lightBg: false,
  // ...其他属性不变
  img: svg1,
  alt: "Credit Card",
  start: "",
};

export const homeObjTwo = {
  // ...其他属性
  img: svg2,
  alt: "Vault",
};

export const homeObjThree = {
  // ...其他属性
  img: profileImg,
  alt: "Vault",
};

export const homeObjFour = {
  // ...其他属性
  img: profileImg,
  alt: "Vault",
};

这种方式Create React App会自动帮你处理图片的打包路径，基本不会出错。

3. 检查Webpack配置（如果是自定义配置的项目） #

如果你的项目不是用Create React App创建的，而是自己配置的Webpack，那可能没加图片处理的loader。需要在webpack.config.js里添加：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

要是用的是旧版Webpack，可能需要用file-loader或url-loader，不过现在Webpack 5+用asset/resource就够了。

4. 确认图片本身没问题 #

有时候图片文件损坏也会导致加载失败，比如SVG格式不对，JPG文件损坏。你可以把图片拖到浏览器里看看能不能正常显示，或者换一张确定没问题的图片测试。

5. 临时排查样式问题 #

你用Styled Components写的Img组件样式看起来没问题，但可以临时加个边框测试元素是否存在：

export const Img = styled.img`
  padding-right: 0;
  border: 0;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  max-height: 500px;
  /* 临时加红色边框 */
  border: 1px solid red;
`;

如果页面上能看到红色边框，说明元素渲染了，只是图片没加载；如果看不到，那可能是父元素的布局问题（比如ImgWrapper或者InfoColumn被隐藏了）。

按照这个步骤排查，应该能很快找到问题所在！

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