不容通过JSON加载的图像的“SRC”（Vue.js）

  • Z时代
  • 2024-01-10
  • 分类：问答

不容通过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？ 请点击下面的链接（网站视图）以获得更多的清晰度！

​​

回答：

尝试改变，绑定属性的方式：

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

以上是 不容通过JSON加载的图像的“SRC”（Vue.js） 的全部内容， 来源链接： utcz.com/qa/266629.html

回到顶部