Replace Broken Images Using jQuery

Project Name:- Replace Broken Images Using jQuery

Solution

  • 2 files + 1 Folder with some images
  • filename: index.php, own.js and some CDN like like bootstrap & jQuery

Index.php/Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Auto Load Submenu - By Hindialerts.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div id="imgcontainer"></div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="own.js"></script>
</body>

</html>

Own.js

$(document).ready(function () {
    let images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
    let image_html = '';
    $.each(images, (key, value) => {
        image_html += '<img src="img/' + value + '"/>';
    });
    $('#imgcontainer').html(image_html);
    $('img').on('error', function () {
        $(this).replaceWith('<img src="img/no-photo.jpg"/>');
    });
});

This is only for learning purpose that you can understand easily. If you get any error or want to something new to learn share details below.

Other Important Topics

Be the first to comment

Leave a Reply

Your email address will not be published.


*