在NextJS前端中显示Strapi API的多个图像

5m1hhzi4  于 2022-12-18  发布在  其他
关注(0)|答案(2)|浏览(159)

我想在NextJS中的动态[slug.js]页面上添加一个carousel。我正在使用Tailwind对我的页面和API中的Strapi进行样式设置。我可以使用src={http://localhost:1337${activity.titlePicture[0].formats.large.url}}获取一张图片,但我不知道如何获取多张图片。在数据库titlePicture中有多张图片。我如何将API中的所有图片都放入carousel中?

disho6za

disho6za1#

你必须使用map函数,因为titlePicture是一个数组。因为map为数组中的每个元素调用一次函数。所以我猜它是这样的:

{activity.titlePicture.map((category) => (<img src={http://localhost:1337${category.formats.large.url})}

这里我使用了category,你可以用任何其他的词来代替category。所以map函数将确保并调用每个元素。我希望这能回答你的问题。

46qrfjad

46qrfjad2#

您所需要做的就是在下一个应用程序中配置重写,以将所有请求转发到Strapi服务器。
为此,您需要更新next.config.js文件并添加以下内容:

module.exports = {
  ...
  async rewrites() {
    return [{
      source: "/uploads/:slug",
      destination: "http://127.0.0.1:1337/uploads/:slug",
    }, ];
  },
  ...
}

您的NextJS应用程序会将所有以/uploads/* 开头的请求重定向到Strapi服务器,该服务器将从静态资产文件夹返回图像,即strapiApp/public/uploads
然后,您可以像这样使用Strapi API中的数据:

<Image
  src = {data.img.url}
  ...
/>

相关问题