How to ignore null values from JSON file correctly

I am fetching a JSON file, and adding the data onto my webpage. I am looping through and creating a new div for each object and it is working except for where I am trying to load in the images into owl carousel. I need to ignore the image = null. It is now looping through and adding the images from the NEXT object if not null...

fetch(‘LINK TO JSON FILE’)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
function appendData(data) {
            var mainContainer = document.getElementById("data");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");
                div.innerHTML += '<div class="owl-carousel"></div>'
                    ;
                mainContainer.appendChild(div); 
                // images
                if (data[i].image1Url != null){
                        $('.owl-carousel').append('<div class="item"><img src="' + data[i].image1Url + '"</div>');
                }
                if (data[i].image2Url != null){
                        $('.owl-carousel').append('<div class="item"><img src="' + data[i].image2Url + '"</div>');
                }
                if (data[i].image3Url != null){
                        $('.owl-carousel').append('<div class="item"><img src="' + data[i].image3Url + '"</div>');
                }
                if (data[i].image4Url != null){
                        $('.owl-carousel').append('<div class="item"><img src="' + data[i].image4Url + '"</div>');
                }
    mainContainer.appendChild(div); 
    }