无法通过 json (Vue.js) 加载图像的“src”答案

【问题标题】：Can´t load the "src" of an image via json (Vue.js)无法通过 json (Vue.js) 加载图像的“src”
【发布时间】：2018-06-08 08:13:55
【问题描述】：

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？请点击下面的链接（网页视图）以获得更清晰的信息！

  [web view][1]

  [1]: https://i.stack.imgur.com/gbFeq.png

【问题讨论】：

那是什么语言？请在您的问题中添加相关代码，很难调试图像。
它在 html 和 javascript 中...可以请您将 4 张图片的 url 复制到您的浏览器中吗？...我在发布时出错了
不，您可以编辑问题。只需将相关代码复制粘贴到帖子中，然后选择粘贴的代码，然后单击编辑器工具上的{} 图标。

标签： javascript html json vue.js

【解决方案1】：

获取图片的最简单方法

<img :src="require(`@/assets/${topnews.img}`)" alt="Top News" />

【讨论】：

"require()" 方法现在不再有效。它会发出系统警告，并且无法加载本地图像。

【解决方案2】：

尝试更改绑定属性的方式：

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

【讨论】：

如果您右键单击损坏的图像并在浏览器中检查它，src 属性会显示什么？
并通过悬停：“无法加载图像”
更新了答案
可能是一些浏览器设置？？
您是否尝试使用 :src 并且不使用花括号？