Question

我使用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>

Answer 1

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

Answer 2

https://jsfiddle.net/kch7sfda/

此处示例。

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

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

2 个答案: