React服务器端图片初始不显示，刷新后恢复的问题求助

问题描述 #

React项目部署到服务器后，部分图片无法在页面初始加载时显示，控制台返回404错误：

ASGimagen.png:1 GET https://[服务器地址]/autodiagnostico/cuadroanimado/ASGimagen.png 404

刷新页面后图片可正常显示，尝试使用LazyLoadImage组件无效，排除路由问题，推测为路径加载相关问题。

相关代码：

import './cuerpoindex.css';
import { Link } from "react-router-dom";
import { LazyLoadImage } from "react-lazy-load-image-component";


const ASG = 'cuadroanimado/ASGimagen.png';

function Cuerpoindex() {

    return (
        <div className="CuerpoIndex">
        {/*   <div className="indexfondo "></div>*/}  
            <div>
            Herramienta de autodiagnóstico ASG para MIPYME
            <p>Índice de Adopción de Criterios ASG</p>
            <p>Mide el grado de transición de las micro, pequeñas y medianas
            empresas hacia un modelo de negocio sostenible a partir
            de la adopción de tres criterios fundamentales:
            Ambiental (A), Social (S) y de Gobernanza (G)</p>
            </div>
            <Link to='/InicioAutodiagnostico'><LazyLoadImage className='imagenASG' src={ASG} alt="logo empresa"></LazyLoadImage></Link>
            
            <div className="BotonComenzar">
            </div>
        </div>
      );
  }

export default Cuerpoindex

解决方案 #

1. 使用React资源导入方式（推荐） #

直接用相对路径字符串作为图片src会导致路由切换时路径解析错误，正确做法是通过import导入图片资源：

import './cuerpoindex.css';
import { Link } from "react-router-dom";
import { LazyLoadImage } from "react-lazy-load-image-component";
// 导入图片资源
import ASGImage from './cuadroanimado/ASGimagen.png';

function Cuerpoindex() {
    return (
        <div className="CuerpoIndex">
            <div>
            Herramienta de autodiagnóstico ASG para MIPYME
            <p>Índice de Adopción de Criterios ASG</p>
            <p>Mide el grado de transición de las micro, pequeñas y medianas
            empresas hacia un modelo de negocio sostenible a partir
            de la adopción de tres criterios fundamentales:
            Ambiental (A), Social (S) y de Gobernanza (G)</p>
            </div>
            <Link to='/InicioAutodiagnostico'>
              <LazyLoadImage className='imagenASG' src={ASGImage} alt="logo empresa" />
            </Link>
            <div className="BotonComenzar">
            </div>
        </div>
      );
  }

export default Cuerpoindex

Webpack构建时会处理导入的图片，生成正确的哈希文件名和路径，避免路由层级变化导致的路径错误。

2. 使用绝对路径（针对public文件夹资源） #

如果图片放在public文件夹下（如public/cuadroanimado/ASGimagen.png），可以用以/开头的绝对路径：

const ASG = '/cuadroanimado/ASGimagen.png';

无论当前路由是什么，都会从服务器根目录查找图片，避免相对路径解析错误。

3. 检查服务器配置 #

确保服务器正确配置静态资源路由，以Nginx为例：

server {
    listen 80;
    server_name [服务器地址];
    root /path/to/your/react/project/build;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 确保静态资源可正常访问
    location ~* \.(png|jpg|css|js)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
}

4. 替换为普通img标签测试 #

暂时替换LazyLoadImage为普通img标签，确认是否是组件本身的问题：

<Link to='/InicioAutodiagnostico'>
  <img className='imagenASG' src={ASGImage} alt="logo empresa" />
</Link>

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