React图片加载异常求助：如何用常量优化图片路径写法？

1. 定义全局常量（多组件复用推荐） #

创建一个专门的常量配置文件，比如src/constants/imagePaths.js：

export const PRODUCT_IMAGE_BASE = "/img/products/";

在需要渲染图片的组件中导入并使用：

import { PRODUCT_IMAGE_BASE } from '../constants/imagePaths';

// 组件内部
<img 
  src={`${PRODUCT_IMAGE_BASE}${product.image}.png`}
  className="max-width-400"
  alt="product preview"
/>

2. 封装工具函数（适合需额外逻辑处理的场景） #

如果后续要加格式校验、默认占位图等逻辑，写个工具函数更灵活，比如src/utils/imageHelper.js：

export const getProductImageUrl = (imageName) => {
  // 可添加额外判断，比如处理空值
  if (!imageName) return '/img/placeholder.png';
  return `/img/products/${imageName}.png`;
};

组件中调用：

import { getProductImageUrl } from '../utils/imageHelper';

// 组件内部
<img 
  src={getProductImageUrl(product.image)}
  className="max-width-400"
  alt="product preview"
/>

3. 组件内定义常量（单组件使用场景） #

如果只有当前组件需要这个前缀，直接在组件里定义即可：

function ProductItem({ product }) {
  const IMAGE_PREFIX = "/img/products/";
  
  return (
    <img 
      src={`${IMAGE_PREFIX}${product.image}.png`}
      className="max-width-400"
      alt="product preview"
    />
  );
}

小技巧：用模板字符串替代拼接 #

相比传统的+字符串拼接，ES6模板字符串（反引号包裹）可读性更强，也能减少拼接错误。

内容的提问来源于stack exchange，提问作者Russ Madrigal