未在jquery/json滑块中加载图像

我想用外部json文件创建jquery滑块，滑块工作正常，但当页面加载时，只有滑块的按钮出现，点击按钮后图像出现，有人能解决问题吗

HTML

<div id="update">

</div>
<!--div block which is to be updated by jquery --->

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<script>
    $(document).ready(function () {
        $.getJSON('data.json', function (data) {
            var output = '<div class="slideshow-container">';
            $.each(data.data, function (key, value) {
                output += '<div class="mySlides fade">';
                output += '<h3 class="numbertext"> Location:   ' + value.location + '</h3>';
                output += '<img src="' + value.links.logo2x + '" style="width:100%;"/>';
                output += '<div class="text"> Name:   ' + value.name + '</div>';
                output += '<div class="desc">' + value.description + '</div>';
                output += '</div>'; /*myslides*/
            });
            output += '<a class="prev" onclick="plusSlides(-1)">' + '&#10094;' + '</a>';
            output += '<a class="next" onclick="plusSlides(1)">' + '❯' + '</a>';
            output += '</div>';
            $('#update').html(output);
        });
    });

“仅在页面上加载”按钮出现

点击按钮后，图像加载

---

这是正常的，因为在您的函数

showselides

中，您使用for循环隐藏了所有img：请尝试

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
       slideIndex = 1
    }
    if (n < 1) {
       slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[n].style.display = "block";
}

$（文档）.ready（函数（）{
输出=”；
输出+=''；
输出+='位置：'；
输出+=''；
输出+=''；
输出+=''；
输出+=''；/*myslides*/
输出+=''；
输出+='位置：'；
输出+=''；
输出+=''；
输出+=''；
输出+=''；/*myslides*/
输出+=''+''和#10094；'+''；
输出+=''+'❯' + '';
输出+=''；
$（'#update'）.html（输出）；
showThis（）；
});

请帮助我无法解决此问题，但现在所有图像都没有加载，只有按钮正在加载。您可以创建一个片段或处理您的问题吗？您是否已将函数放入document.ready（）中？如果没有，请插入它，但是我如何创建fiddle，因为所有数据都来自json文件否，因为函数是普通javascript，但html嵌入到jquery中

body {
   margin: 0;
   padding: 0;
   background-color: #dad7c7;
   font-family: 'Roboto', sans-serif;
   line-height: 1.2em;
}

* {
   box-sizing: border-box
}

.slideshow-container {
   width: 520px;
   position: relative;
   margin: 0 auto;
   max-width: 100%;
}

.mySlides {
   display: none;
   max-width: 100%;
}

mySlides img {
   width: 100%;
   height: auto;
}

.prev,
.next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -22px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid white;
}

.text {
   color: #f2f2f2;
   font-size: 16px;
   display: block;
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 30px;
   text-align: center;
   background-color: black;
   padding-top: 5px;
   text-transform: uppercase;
}
/* Position the "next button" to the right */

.next {
   right: 0;
   border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
   width: 100%;
   text-align: center;
   background-color: black;
   margin: 0 auto;
}

.desc {
   position: absolute;
   color: #968888;
   line-height: 1.5em;
   padding: 10px;
   background-color: white;
   font-weight: 700;
   height: auto;
   overflow: auto;
   transition: all .3s ease;
}

.desc:hover {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Fading animation */

.fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
}

@-webkit-keyframes fade {
   from {
       opacity: .4
   }
   to {
       opacity: 1
   }
}

@-moz-keyframes fade {
   from {
       opacity: .4
   }
   to {
       opacity: 1
   }
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
       slideIndex = 1
    }
    if (n < 1) {
       slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[n].style.display = "block";
}