來自ajax請求的圖像不會顯示在旋轉木馬上

-1

您好我似乎絆倒了我的代碼，我有一個PHP文件的ajax請求，它獲取從api中獲取的'thumbnail_url。我的問題是在我的js和旋轉木馬。我想要實現的是我想將從ajax中拉出的圖像附加到貓頭鷹旋轉木馬上。來自ajax請求的圖像不會顯示在旋轉木馬上

<title>Ajax Preview</title> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/main.js"></script> 
<link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.css" type="text/css" /> 
<link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-theme.css" type="text/css" /> 
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.js"></script> 
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-min.js"></script> 
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/carousel.js"></script> 

    <style> 
    #owl-demo .item{ 
    background: #a1def8; 
    padding: 30px 0px; 
    display: block; 
    margin: 5px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
} 
.prevImg{ 
    visibility:visible !important; 
    display:block !important; 
} 
</style> 
</head> 

<body> 
<div id="owl-example" class="owl-carousel"> 
</div> 
</body> 
</html>

我的AJAX

$(function() { 
     var $data = $('#owl-example'); 
     $.ajax({ 
     type:'GET', 
     dataType:'json', 
     url:'https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/preview-template.php', 
     success: function (data) { 
      //pull data object to get thumbnail_urls. 
      for(var i=0 ; i<data.length ; i++){ 
      console.log(data); 
      $data.append('<div class="item"><img class="prevImg" src=' + data[i].thumbnail_url + '></div>'); 
     } 
     } 
    }); 
    });

來源

2016-09-28 camdev

當你嘗試'console.log（data [i] .thumbnail_url）''時，你會得到什麼？是不是正確的src ?.請在描述問題時更具體一些，因爲現在我不知道該div是不是附加的，或者是img沒有顯示？ –

@AyaSalama我得到的對象，它的內部是site_name，prev_url，thumbnail_url等對象 – camdev

請回答第二個問題，並描述發生了什麼 –

你需要重新初始化與新項目的容器。請確保您在data[i].thumbnail_url中獲得正確的圖片網址。用下面的代碼替換JS。新項目

var owl = $(".owl-carousel").data('owlCarousel'); 
$data.append(html); 
owl.reinit(OWL_OPTIONS);

工作演示JS fiddle here

實際的代碼來重新初始化旋轉木馬，也有輪盤2默認項2秒等2項將被添加到先前的轉盤的時間間隔後。

如果要更換新的全輪播項然後更換 $data.append(html);與$data.html(html); 新item fiddle here

JS更換：

$(document).ready(function() { 
     var $data = $("#owl-example"), 
       OWL_OPTIONS = { 
        autoPlay: 3000, //Set AutoPlay to 3 seconds 
        dots: true, 
        items: 2, 
        itemsDesktop: [1199, 3], 
        itemsDesktopSmall: [979, 3] 
       }; 
     $data.owlCarousel(OWL_OPTIONS); 

     $.ajax({ 
      type: 'GET', 
      dataType: 'json', 
      url: 'https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/preview-template.php', 
      success: function (data) { 
       //pull data object to get thumbnail_urls. 
       var html = ''; 
       for (var i = 0; i < data.length; i++) { 
        html += '<div class="item"><img class="prevImg" src=' + data[i].thumbnail_url + '></div>'; 
       } 
       setTimeout(function() { 
        var owl = $(".owl-carousel").data('owlCarousel'); 
        $data.append(html); 
        owl.reinit(OWL_OPTIONS); 
       }, 2000); 
      } 
     }); 
    });

來源

2016-09-28 06:33:07 Noman

仍然一樣沒有附加在我的HTML，仍然是空白。我的控制檯沒有錯誤或警告只是一個成功的獲取請求， – camdev

@camdev請參閱編輯:) – Noman

<script> 
    $(function() 
    { 
     $('#owl-example').owlCarousel(); 
     $.ajax({ type:'GET', dataType:'json', 
      url:'ajax.php', 
      success: function (data) 
      { 
       var html = ''; 
       var i=0; 
       var length=data.length; 
       while(i<length) 
       { 
        //alert(data[i].preview_url); 
        html+="<div><img src='"+data[i]+"'></div>"; 
        i++; 
       } 
       $("#owl-example").html(html); 
      } 
     }); 

    }); 

</script>

希望這有助於。

來源

2016-09-28 07:03:18 Abhinav

來自ajax請求的圖像不會顯示在旋轉木馬上

回答

相關問題