我想在NextJS中的动态[slug.js]页面上添加一个carousel。我正在使用Tailwind对我的页面和API中的Strapi进行样式设置。我可以使用src={http://localhost:1337${activity.titlePicture[0].formats.large.url}}获取一张图片,但我不知道如何获取多张图片。在数据库titlePicture中有多张图片。我如何将API中的所有图片都放入carousel中?
http://localhost:1337${activity.titlePicture[0].formats.large.url}
disho6za1#
你必须使用map函数,因为titlePicture是一个数组。因为map为数组中的每个元素调用一次函数。所以我猜它是这样的:
{activity.titlePicture.map((category) => (<img src={http://localhost:1337${category.formats.large.url})}
这里我使用了category,你可以用任何其他的词来代替category。所以map函数将确保并调用每个元素。我希望这能回答你的问题。
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} ... />
2条答案
按热度按时间disho6za1#
你必须使用map函数,因为titlePicture是一个数组。因为map为数组中的每个元素调用一次函数。所以我猜它是这样的:
这里我使用了category,你可以用任何其他的词来代替category。所以map函数将确保并调用每个元素。我希望这能回答你的问题。
46qrfjad2#
您所需要做的就是在下一个应用程序中配置重写,以将所有请求转发到Strapi服务器。
为此,您需要更新next.config.js文件并添加以下内容:
您的NextJS应用程序会将所有以/uploads/* 开头的请求重定向到Strapi服务器,该服务器将从静态资产文件夹返回图像,即strapiApp/public/uploads
然后,您可以像这样使用Strapi API中的数据: