2017-12-27 38 views
-3

不容通過JSON加載的圖像的「SRC」(Vue.js)

var topArticle=new Vue({ 
 
    el:'#toparticle', 
 
    data:{topmostArticle:null}, 
 
    created: function(){ 
 
       fetch('topnews.json') 
 
       .then(r=>r.json()) 
 
       .then(res=>{this.topmostArticle=$.grep(res,function(e){return e.topnews!==" "}); 
 
       console.log(this.topmostArticle); 
 
       }); 
 
      } 
 
     });
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>The greatest news app ever</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> 
 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <div id ="toparticle"> 
 
     <img src="{{topmostArticle[0].topnews[0].img}}"> 
 
     <img src="2.jpg"> 
 
     "{{topmostArticle[0].topnews[0].img}}" 
 
    </div> 
 

 
    <script src="main.js"></script> 
 

 
    </body> 
 
</html>

我試圖與外部文件來加載的圖像的源,但我面對一些問題...在圖像標籤中無法識別源代碼。該代碼應該是正確的,因爲當數據加載到圖像標籤之外時,它很好用。任何人有任何想法?非常感謝!

第一個圖像沒有加載(因爲src是通過json傳輸的),第二個圖像沒問題,第三個命令「{{topmostArticle [0] .topnews [0] .img}}」返回「2 .JPG」,所以這是確定

JSON

  [{"topnews":[ 
       {"timestamp":"0", 
       "id":"2", 
       "cathegory":"2", 
       "headline":"2", 
       "text":"2", 
       "img":"2.jpg", 
       "url":"2.jpg", 
       "author":"2", 
       "comments":"2" 
       }, 
       {"timestamp":"0", 
       "id":"2", 
       "cathegory":"3", 
       "headline":"3", 
       "text":"3", 
       "img":"3", 
       "url":"3", 
       "author":"3", 
       "comments":"3" 
       } 
       ]}] 

的問題是,爲什麼我無法通過JSON直接加載在src? 請點擊下面的鏈接(網站視圖)以獲得更多的清晰度!

​​
+2

什麼語言是什麼?請將相關代碼添加到您的問題中,這很難調試圖像。 – Teemu

+0

它是在HTML和JavaScript ...你可以請複製4個圖像的URL在你的browswer?....我發佈了一些錯誤,但發佈 –

+0

不,你可以編輯的問題。只需將相關代碼複製粘貼到帖子中,然後選擇粘貼的代碼並單擊編輯器工具上的「{}」圖標即可。 – Teemu

回答

0

嘗試改變,綁定屬性的方式:

<img :src="topmostArticle[0].topnews[0].img"> 
+0

這是一個排版錯誤...它仍然沒有工作... –

+0

如果右鍵單擊破碎的形象,並在瀏覽器中檢查,什麼顯示爲src屬性? –

+0

並懸停:「無法加載圖像」 –