Javascript 如何在react前端显示来自strapi的图像？

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

那么，要在我的网页中显示媒体，我必须改变什么？当前代码如下所示：（文件：/components/image slider.js）：

---

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

我不完全理解这个问题。我猜你是在问为什么这些照片没有显示出来。当strapi返回时，它作为路径而不是基本url出现。如果您尝试，我想问题会解决。

您需要在图像路径前面使用strapi url。

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;

    [
   {
      "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"
         }
      ]
   }
]