Remix框架如何实现图片存在则加载否则显示默认占位图

存储方案答疑 #

• MySQL是否支持直接存储图片？
  支持，通过LONGBLOB类型字段可以存储图片二进制数据，但完全不推荐普通项目这么做。把图片二进制直接存在数据库里会让数据库体积快速膨胀，拖慢查询、备份、迁移的效率，也无法利用浏览器缓存、CDN做静态资源加速，性价比极低。
• 数据库存储图片路径维护成本是否过高，是否可落地？
  这是绝大多数中小项目的标准落地方案，维护成本极低。你只需要在商品表加一个字符串类型的字段，存储图片相对于站点根目录的访问路径即可，无图商品直接把该字段设为null。后续如果要迁移图片存储、对接CDN，批量替换路径前缀就能完成适配，比存储二进制数据靠谱得多。

初始方案报错原因 #

你最开始写的动态拼接路径require的写法无法运行，是构建工具的机制导致的：Remix底层的构建工具在打包阶段需要静态扫描所有依赖，把用到的资源提前编入产物，动态拼接路径的写法无法在打包阶段确定要引入的具体文件，自然会报模块找不到、不支持动态require的错误。
另外商品图属于公开可访问的静态资源，直接放在public目录即可，不需要放到私有资源目录走模块引入，public目录下的文件构建时会原样输出，通过站点根路径就能直接访问。

正确实现方案 #

你最后摸索出的img标签加onError兜底的方案完全可用，核心逻辑是先尝试加载商品对应图片，只要加载失败（路径不存在、文件丢失、网络错误等），就自动切换为通用空白占位图，注意要先清空onError回调，避免占位图加载失败时触发死循环。
这里给一个更完善的写法，减少无效请求：

// 提前把通用占位图放到public对应目录，定义固定访问路径
const DEFAULT_PLACEHOLDER = "/assets/no-pic.png";

export default function ProductCard({ product }) {
  // 数据库已标记无图的商品直接用占位图，不发起无效请求
  const initialSrc = product.imagePath ? `/product-images/${product.imagePath}` : DEFAULT_PLACEHOLDER;
  
  return (
    <img
      src={initialSrc}
      alt={product.name}
      onError={(e) => {
        e.target.onerror = null; // 阻断循环触发
        e.target.src = DEFAULT_PLACEHOLDER;
      }}
    />
  )
}

优化提示：onError只用来兜底异常场景，比如数据库存了路径但实际文件被误删、路径配置错误的情况，正常无图的商品直接在数据层返回占位图路径即可，能减少很多没必要的资源请求。

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