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

Question

I'm currently working on a website using Strapi as a CMS and Next.js (React) in Frontend. The site also has an image slider which obviously contains an image, a headline and a description. I already created a function to get the title and the description, but somehow this doesn't work with the image.

So what do I have to change to display the media in my webpage? The current code looks like the following: (file: /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;

... and undernath is the data I get back from the Strapi API looks like the following: (It's just filled with sample images, titles and descriptions...)

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

I hope someone is able to help me - thank you!

Answer 1

I do not fully understand the problem. I guess you're asking why the pictures are not showing. When the strapi returns, it comes as a path, not as a base url. If you try <img src={http://localhost:1337/ + url} /> I guess the problem will be solved.