NextJS（v13）部署Vercel后URL自动添加%20的问题求助

问题根源是dt.backdrop_path或dt.poster_path的字段值首尾带有空格，本地开发时未触发URL编码，部署到Vercel后Next.js的Image组件会自动对URL中的空格进行编码，导致出现%20。

直接在拼接路径时用trim()方法去除空白字符即可解决：

<Image   
     alt="Thumbnail Image"
     width={1080}
     height={1920}
     src={`https://image.tmdb.org/t/p/original/${(dt.backdrop_path || dt.poster_path).trim()}`}/>

补充说明 #

• trim()会移除字符串首尾的所有空白字符（包括空格、制表符、换行符等），确保拼接后的URL干净无多余字符。
• 也可以额外检查TMDB API返回的原始数据，确认是否存在字段带空格的情况，但前端做trim()处理是更稳妥的兜底方案，避免后端数据异常影响页面展示。

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