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

-3

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？請點擊下面的鏈接（網站視圖）以獲得更多的清晰度！

來源

2017-12-27 j.joe

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

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

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

嘗試改變，綁定屬性的方式：

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

來源

2017-12-27 18:03:45

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

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

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

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

回答

相關問題