2017-12-27 8 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>

をロードCan'tいくつかの問題があります...画像タグでソースが認識されません。データがイメージタグの外に読み込まれたとき、それはうまく動作するので、コードは正しいはずです。誰でも何か考えがある?どうもありがとうございます!

srcがjson経由で送信されているため、最初の画像はロードされず、2番目の画像はokで、3番目のコマンド「{{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をコピーしてください...?投稿中にいくつかエラーが発生しました –

+0

いいえ、あなたは質問を編集できます。関連するコードを投稿にコピーして貼り付け、貼り付けたコードを選択し、エディタツールの '{}'アイコンをクリックしてください。 – Teemu

答えて

0

あなたが属性をバインドする方法を変更してみてください:

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

これはタイポグラフィのエラーでした...まだ動作していません... –

+0

壊れたイメージを右クリックしてブラウザで調べたら、srcプロパティとして表示されるものは何ですか? –

+0

とホバリングによって:「画像を読み込めませんでした」 –

関連する問題