Render.com部署应用图片无法显示，需大写路径中Image字符求助

我把应用部署到Render.com了，本地运行完全正常，但部署后必须把图片src路径里的images改成大写开头的Images才能显示图片。

首页截图：

应用地址：https://jackies-store.onrender.com/

用浏览器调试工具改成大写只是临时解决，不知道怎么永久修复，求帮忙！

相关Product组件代码 #

function Product(props) {
  const { product } = props;

  return (
    <Card>
      <Link to={`/product/${product.slug}`}>
        <img
          src={product.image}
          className='card-img-top'
          alt={product.name}
        />
      </Link>

      <Card.Body>
        <Link to={`/product/${product.slug}`}>
          <Card.Title>{product.name}</Card.Title>
        </Link>
        <Rating rating={product.rating} numReviews={product.numReviews} />
        <Card.Text>${product.price}</Card.Text>
        {product.countInStock === 0 ? (
          <Button variant='light' disabled>
            Out of stock
          </Button>
        ) : (
          <Button id={'in-stock'}>In Stock</Button>
        )}
      </Card.Body>
    </Card>
  );
}
export default Product;

图片数据来源 #

// _id: '2',
  name: 'Adidas Fit Shirt',
  slug:'Adidas Fit Shirt',
  category: 'Shirts',
  image: '/images/02.jpg',
  price: 100,
  brand: 'Adidas',
  rating: 4.0,
  numReviews: 10,
  countInStock:3,
  description: 'high quality product',
},
{
  // _id: '3',
  name: 'Lacoste Free Shirt',
  slug:'Lacoste Free Shirt',
  category: 'Shirts',
  image: '/images/03.jpg',
  price: 220,
  brand: 'Lacoste',
  rating: 4.8,
  numReviews: 17,
  countInStock:40,
  description: 'high quality product',
},
{
  // _id: '4',
  name: 'Nike Slim Pant',
  slug:'Nike Slim Pant',
  category: 'Pants',
  image: '/images/04.jpg',
  price: 78,
  brand: 'Nike',
  rating: 1.5,
  numReviews: 14,
  countInStock:5,
  description: 'high quality product',
},
{
  // _id: '5',
  name: 'Puma Slim Pant',
  slug:'Puma Slim Pant',
  category: 'Pants',
  image: '/images/05.jpg',
  price: 65,
  brand: 'Puma',
  rating: 4.5,
  numReviews: 10,
  countInStock:15,
  description: 'high quality product',
},
{
// _id: '6',

永久修复方案 #

这问题出在Render的部署环境是Linux系统，大小写敏感，而本地开发环境（比如Windows、macOS默认）不区分大小写，所以本地能识别/images/xxx.jpg，但服务器上实际的图片文件夹是Images（大写I），路径不匹配导致图片加载失败。

给你三个可行的永久修复方法：

• 统一文件夹和路径的大小写：把本地项目里的图片文件夹从images改名为Images，同时把所有数据中的图片路径（比如image: '/images/02.jpg'）改成/Images/02.jpg，重新部署即可。
• 代码中动态转换路径：如果不想改动文件夹和数据，直接在Product组件的img标签里替换路径：

  <img
    src={product.image.replace('/images/', '/Images/')}
    className='card-img-top'
    alt={product.name}
  />
  

• 构建时自动同步文件夹：在package.json的构建命令里增加复制步骤，比如：

  "build": "mkdir -p public/Images && cp -r public/images/* public/Images/ && react-scripts build"
  

  这样构建时会自动把images里的内容复制到Images文件夹，兼容两种路径写法。

内容的提问来源于stack exchange，提问作者Ira Tillman