React项目中/public/images本地图片无法加载问题求助

针对你遇到的通过trabajo.id拼接路径加载public/images下图片失败的问题，可以按以下步骤排查解决：

1. 确认文件与路径的准确性 #

• 检查public/images目录下的图片文件名是否与trabajos.js中的id完全匹配（包括大小写），比如是否存在moviehub.png、todolist.png、starbucksclone.png。Linux服务器或部署环境对大小写敏感，即使本地Windows环境能识别，部署后也可能出错。
• 确认public目录位于项目根目录，而非src文件夹内，Create React App（CRA）默认只会识别根目录下的public作为静态资源目录。

2. 使用CRA推荐的process.env.PUBLIC_URL拼接路径 #

CRA官方推荐通过process.env.PUBLIC_URL来引用public下的资源，这能避免部署到子路径或路径配置变化导致的加载问题。修改Portafolio.js中的图片路径：

<img 
  src={`${process.env.PUBLIC_URL}/images/${trabajo.id}.png`} 
  alt={trabajo.nombre}  // 替换为项目名称，提升页面可访问性
/>

3. 直接验证资源可访问性 #

在浏览器地址栏输入http://localhost:3000/images/moviehub.png（开发环境下），如果无法打开，说明文件不存在或路径有误；如果能正常显示，则问题出在组件内的路径写法。

4. 修正小错误（不影响图片但需规范） #

你的代码中target='__blank'是错误写法，正确的新窗口打开属性是target='_blank'，建议修正：

<Link to={trabajo.url} target='_blank'>{trabajo.nombre}</Link>

5. 清理缓存并重启服务 #

开发环境下缓存可能导致资源加载异常，尝试：

• 关闭开发服务器后重新启动（npm start/yarn start）
• 清除浏览器缓存（Ctrl+Shift+R强制刷新）

修改后的完整Portafolio.js代码 #

import React from 'react'
import { trabajos } from './datos/trabajos';
import { Link } from 'react-router-dom';

export const Portafolio = () => {
  return (
    <div>
      {trabajos.map(trabajo => (
        <article key={trabajo.id}>
          <div className='mask'>
            <img 
              src={`${process.env.PUBLIC_URL}/images/${trabajo.id}.png`} 
              alt={trabajo.nombre} 
            />
          </div>
          <span>{trabajo.categorias}</span>
          <h2><Link to={trabajo.url} target='_blank'>{trabajo.nombre}</Link></h2>
          <h3>{trabajo.tecnologias}</h3>
        </article>
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Chong NG Tony