在 vuejs 中绑定动态 img 对我不起作用答案

【问题标题】：binding dynamic img in vuejs does not work for me在 vuejs 中绑定动态 img 对我不起作用
【发布时间】：2018-05-09 18:03:01
【问题描述】：

我有一个使用 vue.js 从 api 中提取的动态 img。由于某种奇怪的原因，图像不会绑定。我都试过了：src。和 :attr 但都不起作用。 url 确实显示在数据内部的 vue 控制台中，但无法让图像显示在页面上。任何帮助都会大有帮助。

<html>
<head>
    <style></style>
</head>
<body>
  <div class="container">
    <div id="editor">
      <img v-bind:src="PictureURL" />      
    </div>
  </div>
  <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#editor",
      data: {    
        PictureUrl: "",
      },
      created: function() {
        this.getCurrentUser();
      },
      methods: {
        getCurrentUser: function() {
          var root = 'https://example.com';
          var headers = {
            accept: "application/json;odata=verbose"
          }
          var vm = this;
          var __REQUESTDIGEST = '';
          $.ajax({
            url: root + "_api/Properties",
            type: 'Get',
            headers: headers,
            success: function(data) {
              vm.PictureUrl = data.d.PictureUrl;
            }
          })
        },
      }
    })
  </script>
</body>
</html>

【问题讨论】：

标签： vue.js

【解决方案1】：

将<img v-bind:src="PictureURL" /> 更改为<img v-bind:src="PictureUrl" />，以便匹配数据项名称。 Vue 应该在控制台中给你一个关于这个的错误。

【讨论】：

你能告诉我有什么不同吗——我看不到

【解决方案2】：

https://jsfiddle.net/kch7sfda/

此处为示例。

您可以尝试： 1.添加v-if到img元素 2.将PictureUrl重命名为pictureUrl（第一个小写字母）

【讨论】：

@emils Gulbis 为什么“P”需要小写？两个都试了还是不行