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

并悬停:“无法加载图像” –