Question

我目前正在开发一个使用 Strapi 作为 CMS 和 Next.js (React) 在前端的网站。该网站还有一个图像滑块，显然包含图像、标题和描述。我已经创建了一个函数来获取标题和描述，但不知何故这不适用于图像。

那么我需要更改什么才能在我的网页中显示媒体？当前代码如下所示：（文件：/components/image-slider.js）：

import React from "react";
const Slider = ({}) => {


    const [banners, setBanners] = React.useState(null);
    React.useEffect(() => {
        const getBanners = async() => {
          const res = await fetch("http://localhost:1337/banners/");
          const json = await res.json();
          setBanners(json);
        }
       
         getBanners();
       }, [])
       
       if (typeof window !== 'undefined') {

          // makes image slider working
            
        }
       
        return (
            <div className="img-slider">
                <div className="slide active">
                    <div className="info">
                            {banners ? banners.filter(function (banner) {
                                return banner.Title === "Musik"
                            }).map((banner) => 
                                <h2 key={banner.Id}>{banner.Title}</h2>
                            ) : (
                                <div>Loading...</div>
                            )}
                            {banners ? banners.filter(function (banner) {
                                return banner.Title === "Musik"
                            }).map((banner) => 
                                <p key={banner.Id}>{banner.Content}</p>
                            ) : (
                                <div>Loading...</div>
                            )}
                            {banners ? banners.filter(function (banner) {
                                return banner.Title === "Musik"
                            }).map((banner) => 
                                <img className="slider-image">{ ? what do I have to put here? / what do I have to change? }</img>
                            ) : (
                                <div>Loading...</div>
                            )}                                         
                    </div>
                </div>
                <div className="slide">
                <div className="info">
                    {banners ? banners.filter(function (banner) {
                        return banner.Title === "Sport"
                    }).map((banner) => 
                        <h2 key={banner.Id}>{banner.Title}</h2>
                    ) : (
                        <div>Loading...</div>
                    )}
                    {banners ? banners.filter(function (banner) {
                        return banner.Title === "Sport"
                    }).map((banner) => 
                        <p key={banner.Id}>{banner.Content}</p>
                    ) : (
                        <div>Loading...</div>
                    )}               
                </div>
                </div>

                {/* Futher slides */}
            
                <div className="navigation">
                    <div className="btn-navig active"></div>
                    <div className="btn-navig"></div>
                    <div className="btn-navig"></div>
                </div>
            
            </div>
        )
    }

export default Slider;

...下面是我从 Strapi API 返回的数据如下所示：（它只是填充了示例图像、标题和描述...）

    [
   {
      "id":1,
      "Title":"Musik",
      "Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "published_at":"2021-04-23T07:32:10.839Z",
      "created_at":"2021-04-23T07:32:08.130Z",
      "updated_at":"2021-04-23T07:32:10.883Z",
      "Cover":[
         {
            "id":9,
            "name":"we-love-pizza.jpg",
            "alternativeText":null,
            "caption":null,
            "width":3782,
            "height":2522,
            "formats":{
               "thumbnail":{
                  "name":"thumbnail_we-love-pizza.jpg",
                  "hash":"thumbnail_we_love_pizza_d16dd21274",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":234,
                  "height":156,
                  "size":13.75,
                  "path":null,
                  "url":"/uploads/thumbnail_we_love_pizza_d16dd21274.jpg"
               },
               "large":{
                  "name":"large_we-love-pizza.jpg",
                  "hash":"large_we_love_pizza_d16dd21274",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":1000,
                  "height":667,
                  "size":180.46,
                  "path":null,
                  "url":"/uploads/large_we_love_pizza_d16dd21274.jpg"
               },
               "medium":{
                  "name":"medium_we-love-pizza.jpg",
                  "hash":"medium_we_love_pizza_d16dd21274",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":750,
                  "height":500,
                  "size":106.25,
                  "path":null,
                  "url":"/uploads/medium_we_love_pizza_d16dd21274.jpg"
               },
               "small":{
                  "name":"small_we-love-pizza.jpg",
                  "hash":"small_we_love_pizza_d16dd21274",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":500,
                  "height":333,
                  "size":52.59,
                  "path":null,
                  "url":"/uploads/small_we_love_pizza_d16dd21274.jpg"
               }
            },
            "hash":"we_love_pizza_d16dd21274",
            "ext":".jpg",
            "mime":"image/jpeg",
            "size":955.02,
            "url":"/uploads/we_love_pizza_d16dd21274.jpg",
            "previewUrl":null,
            "provider":"local",
            "provider_metadata":null,
            "created_at":"2021-04-20T17:42:20.277Z",
            "updated_at":"2021-04-20T17:42:20.277Z"
         }
      ]
   },
   {
      "id":2,
      "Title":"Sport",
      "Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "published_at":"2021-04-24T11:56:58.633Z",
      "created_at":"2021-04-24T11:56:56.191Z",
      "updated_at":"2021-04-24T11:56:58.697Z",
      "Cover":[
         {
            "id":8,
            "name":"beautiful-picture.jpg",
            "alternativeText":null,
            "caption":null,
            "width":3824,
            "height":2548,
            "formats":{
               "thumbnail":{
                  "name":"thumbnail_beautiful-picture.jpg",
                  "hash":"thumbnail_beautiful_picture_06a43830c6",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":234,
                  "height":156,
                  "size":6.44,
                  "path":null,
                  "url":"/uploads/thumbnail_beautiful_picture_06a43830c6.jpg"
               },
               "large":{
                  "name":"large_beautiful-picture.jpg",
                  "hash":"large_beautiful_picture_06a43830c6",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":1000,
                  "height":666,
                  "size":83.56,
                  "path":null,
                  "url":"/uploads/large_beautiful_picture_06a43830c6.jpg"
               },
               "medium":{
                  "name":"medium_beautiful-picture.jpg",
                  "hash":"medium_beautiful_picture_06a43830c6",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":750,
                  "height":500,
                  "size":47.82,
                  "path":null,
                  "url":"/uploads/medium_beautiful_picture_06a43830c6.jpg"
               },
               "small":{
                  "name":"small_beautiful-picture.jpg",
                  "hash":"small_beautiful_picture_06a43830c6",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":500,
                  "height":333,
                  "size":23.36,
                  "path":null,
                  "url":"/uploads/small_beautiful_picture_06a43830c6.jpg"
               }
            },
            "hash":"beautiful_picture_06a43830c6",
            "ext":".jpg",
            "mime":"image/jpeg",
            "size":585.12,
            "url":"/uploads/beautiful_picture_06a43830c6.jpg",
            "previewUrl":null,
            "provider":"local",
            "provider_metadata":null,
            "created_at":"2021-04-20T17:42:20.163Z",
            "updated_at":"2021-04-20T17:42:20.163Z"
         }
      ]
   },
   {
      "id":3,
      "Title":"Kunst",
      "Content":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "published_at":"2021-04-24T11:57:31.725Z",
      "created_at":"2021-04-24T11:57:15.225Z",
      "updated_at":"2021-04-24T11:57:31.794Z",
      "Cover":[
         {
            "id":6,
            "name":"this-shrimp-is-awesome.jpg",
            "alternativeText":null,
            "caption":null,
            "width":1200,
            "height":630,
            "formats":{
               "thumbnail":{
                  "name":"thumbnail_this-shrimp-is-awesome.jpg",
                  "hash":"thumbnail_this_shrimp_is_awesome_4167fb0adc",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":245,
                  "height":129,
                  "size":9.43,
                  "path":null,
                  "url":"/uploads/thumbnail_this_shrimp_is_awesome_4167fb0adc.jpg"
               },
               "large":{
                  "name":"large_this-shrimp-is-awesome.jpg",
                  "hash":"large_this_shrimp_is_awesome_4167fb0adc",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":1000,
                  "height":525,
                  "size":72.87,
                  "path":null,
                  "url":"/uploads/large_this_shrimp_is_awesome_4167fb0adc.jpg"
               },
               "medium":{
                  "name":"medium_this-shrimp-is-awesome.jpg",
                  "hash":"medium_this_shrimp_is_awesome_4167fb0adc",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":750,
                  "height":394,
                  "size":48.38,
                  "path":null,
                  "url":"/uploads/medium_this_shrimp_is_awesome_4167fb0adc.jpg"
               },
               "small":{
                  "name":"small_this-shrimp-is-awesome.jpg",
                  "hash":"small_this_shrimp_is_awesome_4167fb0adc",
                  "ext":".jpg",
                  "mime":"image/jpeg",
                  "width":500,
                  "height":263,
                  "size":26.69,
                  "path":null,
                  "url":"/uploads/small_this_shrimp_is_awesome_4167fb0adc.jpg"
               }
            },
            "hash":"this_shrimp_is_awesome_4167fb0adc",
            "ext":".jpg",
            "mime":"image/jpeg",
            "size":95.48,
            "url":"/uploads/this_shrimp_is_awesome_4167fb0adc.jpg",
            "previewUrl":null,
            "provider":"local",
            "provider_metadata":null,
            "created_at":"2021-04-20T17:42:19.639Z",
            "updated_at":"2021-04-20T17:42:19.639Z"
         }
      ]
   }
]

我希望有人能够帮助我 - 谢谢！

Answer 1

我不完全理解这个问题。我猜你在问为什么图片不显示。当 stripi 返回时，它是一个路径，而不是一个基本的 url。如果你试试我想问题会解决的。

如何在反应前端显示来自 Strapi 的图像？

1 个答案: