时间戳

首页 > 解决方案 > 如果未加载，如何摆脱损坏的图像？

javascript - 如果未加载，如何摆脱损坏的图像？

问题描述

我已经在网格中显示了图像，但是有些图像没有加载，所以我从themoviedb.org得到了损坏的图像。

那么，我怎样才能摆脱损坏的图像并只保留那些加载的图像呢？

请尝试在设备中运行我的代码以获得更好的输出。

我的代码包括 HTML、CSS 和 JavaScript。

请通过我的代码。帮助将不胜感激...

 






 //APIS
const API_KEY='d0bb61e85a438ea9d517dce9f15693aa';
const url='https://api.themoviedb.org/3/search/movie?api_key=d0bb61e85a438ea9d517dce9f15693aa';
const IMAGE_URL = 'https://image.tmdb.org/t/p/w500';
 

  
   
    .header-fixed {
        background-color:#292c2f;
        box-shadow:0 1px 1px #ccc;
        padding: 20px 40px;
        height: 80px;
        color: #ffffff;
        box-sizing: border-box;
        top:-100px;

        -webkit-transition:top 0.3s;
        transition:top 0.3s;

    }

    .header-fixed .header-limiter {
        max-width: 1200px;
        text-align: center;
        margin: 0 auto;
        display: grid;
    }

    /*  The header placeholder. It is displayed when the header is fixed to the top of the
        browser window, in order to prevent the content of the page from jumping up. */

    .header-fixed-placeholder{
        height: 80px;
        display: none;
    }

    /* Logo */

    .header-fixed .header-limiter h1 {
        float: left;
        font: normal 28px Cookie, Arial, Helvetica, sans-serif;
        line-height: 40px;
        margin: 0;
    }

    .header-fixed .header-limiter h1 span {
        color: #5383d3;
    }

    /* The navigation links */

    .header-fixed .header-limiter a {
        color: #ffffff;
        text-decoration: none;
    }

    .header-fixed .header-limiter nav {
        font:16px Arial, Helvetica, sans-serif;
        line-height: 40px;
        float: right;
    }

    .header-fixed .header-limiter nav a{
        display: inline-block;
        padding: 0 5px;
        text-decoration:none;
        color: #ffffff;
        opacity: 0.9;
    }

    .header-fixed .header-limiter nav a:hover{
        opacity: 1;
    }

    .header-fixed .header-limiter nav a.selected {
        color: #608bd2;
        pointer-events: none;
        opacity: 1;
    }

    /* Fixed version of the header */

    body.fixed .header-fixed {
        padding: 10px 40px;
        height: 50px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    body.fixed .header-fixed-placeholder {
        display: block;
    }

    body.fixed .header-fixed .header-limiter h1 {
        font-size: 24px;
        line-height: 30px;
    }

    body.fixed .header-fixed .header-limiter nav {
        line-height: 28px;
        font-size: 13px;
    }
    /* Form */
    .form-group{
        display: grid;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 1em;
        margin-right: 1em;
        height: 30px;
    }

    #search{
        color: #ffffff;
        background-color: #5383d3;
        min-height: 38px;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0 auto;
        border-radius: 25px;
    }
    .submit_se{
        display: flex;
        justify-content: center;
        align-items: center;
        height:30px;
    }
    #inputValue{
        border-radius: 25px;
        border: 2px solid gray;
        text-align: center;
    }
    input[type="text"]::placeholder {  
                      
        /* Firefox, Chrome, Opera */ 
        text-align: center; 
    } 

    .card {
        display: grid;
        grid-gap: 2px;
        grid-template-columns: repeat(6,1fr);
        margin-left: 1em;
        margin-right: 1em;
    }

    .movie_card img {
        width:500px;
    }
    /* Making the header responsive */

    @media all and (max-width: 600px) {

        .header-fixed {
            padding: 20px 0;
            height: 75px;
        }

        .header-fixed .header-limiter h1 {
            float: none;
            margin: -8px 0 10px;
            text-align: center;
            font-size: 24px;
            line-height: 1;
        }

        .header-fixed .header-limiter nav {
            line-height: 1;
            float:none;
        }

        .header-fixed .header-limiter nav a {
            font-size: 13px;
        }

        body.fixed .header-fixed {
            display: none;
        }

    }

    /*
         We are clearing the body's margin and padding, so that the header fits properly.
         We are also adding a height to demonstrate the scrolling behavior. You can remove
         these styles.
     */

    body {
        margin: 0;
        padding: 0;
        height: 1500px;
    }
    .title{
            text-align: center;
    }

   



 
   
    <!DOCTYPE html>
    <!--my javascript is in my html-->
    <!--my javascript include the APIs-->
    <!--YOU CAN TRY MY CODE FOR BETTER OUTPUT-->
    <!--I CANNOT FIX THE BROKEN IMAGES DISPLAYED IN GRID-->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Movie app</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <header class="header-fixed">
            <div class="header-limiter">
            <h1 class="title" >MOVIE TRAILERS</h1>
        </div>
        </header>
        <div class="container">
            <form>
                 <div class="form-group">
                <input type="text" id="inputValue" placeholder="search the trailer">
            </div>
            <div class="submit_se">
            <button type="submit" id="search">Search the movie trailer</button>
            
           
    
        </div>
        </form>
    </div>
    <div id="movies-searchable">
    
        </div>
    
    <!--JAVASCRIPT CODE-->
    <script>
                
        //selecting DOM elements
        const buttonElement = document.querySelector('#search');
        const inputElement = document.querySelector('#inputValue');
        const movieSearchable= document.querySelector('#movies-searchable');
        
      
        
    //function1
    buttonElement.onclick =function(event){
        event.preventDefault();
        const value =  inputElement.value;
        const newUrl = url + '&query=' + value;
    fetch(newUrl)
        .then((res) => res.json())
        .then((data) => {
            //data.result[]
            const movies = data.results;
           const movieBlock = createMovieContainer(movies);
           movieSearchable.appendChild(movieBlock);
        console.log('Data:',data);
    })
        .catch((error)=>{
        console.log('Error',error)
    });
    console.log(value);
    }
    
    
    
    //function 3 
    function movieSection(movies){
        return movies.map((movie) => {
             return `
           
               <img src=${IMAGE_URL + movie.poster_path} data-movie-id=${movie.id}/>
             `
             ;
         })
        }
        function onError(img) {
            if(img=='https://image.tmdb.org/t/p/w500'){
        // Change the url
        img.src = 'https://image.tmdb.org/t/p/w500';
        jQuery(img).hide();
            }
    }
       
    
       
         //function2
     function createMovieContainer(movies){
         const movieElement =document.createElement('div');
         movieElement.setAttribute('class','movie');
         const movieTemplate = `
         <h2 class="text-center">Search results </h2>
             <div class="card movie_card">
         ${movieSection(movies)} 
       
                <i class="fas fa-play play_button" data-toggle="tooltip" data-placement="bottom" title="Play  Trailer">
                </i>
                <h5 class="card-title"></h5>
                    <span class="movie_info"></span>
                    <span class="movie_info float-right"><i class="fas fa-star"></i></span>
              </div>
            </div>
        </div>
         `;
         movieElement.innerHTML = movieTemplate;
         return movieElement;
     } 
    </script>
    </body>
    </html>

标签： javascripthtmlcss

解决方案

您可以在 onclick 函数中使用它。

所有损坏的图像都以结尾，/w500null因此您只需过滤所有img标签并对其进行处理，在我的示例中将其设置为不显示。

var broken="/w500null";

const img = document.querySelectorAll("img");
//get all images
//console.log(img);
img.forEach(img => {
    if (img.src.endsWith(broken)) {
      img.style.display = "none";
    };    
});

您的点击功能应如下所示：

buttonElement.onclick =function(event){
        event.preventDefault();
        const value =  inputElement.value;
        const newUrl = url + '&query=' + value;
    fetch(newUrl)
        .then((res) => res.json())
        .then((data) => {
            //data.result[]
            const movies = data.results;
           const movieBlock = createMovieContainer(movies);
           movieSearchable.appendChild(movieBlock);
           var broken="/w500null";

const img = document.querySelectorAll("img");
//get all links
//console.log(img);
img.forEach(img => {
    if (img.src.endsWith(broken)) {
      img.style.display = "none";
    };    
});
        //console.log('Data:',data);
    })
        .catch((error)=>{
        //console.log('Error',error)
    });
    //console.log(value);
    //
    //
    }

推荐阅读