Next.js动态路由页面图片加载出现404错误求助

• 问题根源：你用相对路径引用图片时，动态路由search/[keyword]的页面会基于当前路由层级发起请求，把原本的根路径资源请求变成了/search/icons/instagram_icon.svg，自然找不到资源。

• 解决方案：

  1. 改用绝对路径引用：将图片的src改为以/开头的绝对路径，确保无论当前路由是什么，都会从网站根目录查找资源。
     示例代码：

     import Image from 'next/image';
     
     <Image 
       src="/icons/instagram_icon.svg" 
       alt="Instagram图标" 
       width={24} 
       height={24} 
     />
     

  2. 确认资源目录结构：保证你的icons文件夹是放在Next.js项目的public目录下（即public/icons/instagram_icon.svg），这是Next.js静态资源的标准存放位置，根路径引用会自动指向public目录下的对应文件。

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