JSON, Swiper JS: Can't create carousel of images from Array-CodePudding

I have a JSON, which contains array of images (.flickr_images).

I have to create a carousel of images. In codepen all images works fine, but in VSCode I have an error.

Tried this method

<div >
   <div >
      <div >
          <img src="" alt="Dragon" >
      </div>
      <div >
          <img src="" alt="Dragon" >
      </div>
      <div >
          <img src="" alt="Dragon" >
      </div>
      <div >
          <img src="" alt="Dragon" >
      </div>
                        
    </div>
    <div ></div>
    <div ></div>
    <div ></div>
    </div>

fetch('https://api.spacexdata.com/v4/dragons/5e9d058759b1ff74a7ad5f8f')
    .then((r) => r.json())
    .then((d) => {
        document.querySelectorAll('.image_dragon').forEach((el, i) => (el.src = d.flickr_images[i]));
    });

Working Snippet:

fetch('https://api.spacexdata.com/v4/dragons/5e9d058759b1ff74a7ad5f8f')
  .then((r) => r.json())
  .then((d) => {
    document.querySelectorAll('.image_dragon').forEach((el, i) => (el.src = d.flickr_images[i]));
    initCarousel();
  });


function initCarousel() {

  const swiper = new Swiper('.swiper', {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
        loop: true
      });

}

html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .swiper-button-prev,
      .swiper-button-next,
      .swiper-pagination {
         background: rgba(255, 255, 255, .4);
         border-radius: 5px;
         padding: 10px;
      }
      
      .swiper-button-prev:hover,
      .swiper-button-next:hover,
      .swiper-pagination:hover {
          background-color: white;
       }

<div >
  <div >
    <div >
      <img src="" alt="Dragon" >
    </div>
    <div >
      <img src="" alt="Dragon" >
    </div>
    <div >
      <img src="" alt="Dragon" >
    </div>
    <div >
      <img src="" alt="Dragon" >
    </div>

  </div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

CodePudding user response：

Referrer Policy

The solution to the problem is simple, yet interesting and good to know. The fix is to add the following attribute to each image element:

referrerpolicy="no-referrer"

And you can test the fix by pasting the following html into a page and then opening it with VSCode Live Server. With the attribute set it displays normally, but with it removed it is blocked (403). And make sure to disable browser caching for this test to work correctly.

<img src="https://i.imgur.com/9fWdwNv.jpg" referrerpolicy="no-referrer">

And yet if we post the same html into JSFiddle it works both with and without the attribute.

So what is going on here?

Servers may restrict access to resources, like images, based on some configuration. They might require the user to be authenticated or to make the request from a certain domain. In this case, Flickr is blocking one of the images. It's most likely only blocking the request from VSCode Live Server because it is using http localhost. Yet, we can get around that by setting the referrer policy.

Special Case: The results can be unpredictable when you have multiple images with the same src but mixed referrer policy attributes. So it's probably better to set them all the same.

This solution can work with other sites besides just Flickr, which is why it's a good trick to know.

Further reading

The attribute and associated header have a number of possible values and you can read more about them at MDN Referrer-Policy and HTMLImageElement.referrerPolicy

Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url