Next.js中从JSON导入的相对路径图片无法加载问题求助

问题根源 #

你写的图片路径/../../public/images/foodSupplements.png不符合Next.js静态资源的规则：public文件夹是静态资源的根目录，访问时不需要带public或者上级路径，这个错误路径会导致服务器返回404的HTML页面，所以Image组件提示收到的是text/html而非图片。

解决步骤 #

1. 修正JSON中的图片路径
   把JSON里的image字段改成从根目录开始的正确路径：

   {
     "categories": [
       {
         "id": 1,
         "category_slug": "food_supplements",
         "title": "Food Supplements",
         "image": "/images/foodSupplements.png"
       }
     ]
   }
   

   确保你的图片实际存放在public/images/foodSupplements.png，文件名大小写要完全匹配（比如Linux/macOS下区分大小写，别把PNG写成png）。

2. 组件代码无需修改
   原来的渲染代码可以直接用修正后的路径，Next.js会自动从public目录加载图片：

   {
     Data.categories.map((category, idx) => {
       return (
         <div key={idx} className="header-categories-container">
           <Image className="header-btn-image" src={category.image} alt="btn-img" width="64" height="64"></Image>
           <Link href={`/${category.route}`}>
             <button className="header-category-button">{category.title}</button>
           </Link>
         </div>
       )
     })
   }
   

3. 额外排查点（如果还是报错）

   • 检查Next.js版本：如果是App Router（Next.js 13+），确保next.config.js里的图片配置正确，本地图片只要路径无误就不需要额外配置images.domains。
   • 无需用require导入JSON里的路径：直接使用字符串路径即可，Next.js的Image组件会自动处理静态资源优化。

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