Vue.js动态绑定图片失效问题求助

嘿，我帮你梳理下问题所在，这几个点应该能解决你的图片不显示的问题：

1. 变量名大小写不匹配（最关键！） #

你模板里写的是v-bind:src="PictureURL"（最后一个字母是大写L），但在Vue实例的data里定义的是PictureUrl（最后一个字母是小写l）。Vue对变量名的大小写是严格区分的，这直接导致模板找不到对应的变量，图片自然加载失败。

把模板里的代码改成和data一致的变量名就行：

<!-- 两种写法都可以，推荐简写的:src -->
<img :src="PictureUrl" alt="用户头像" />

2. 忘记引入jQuery库 #

你代码里用了$.ajax来发请求，但当前代码里没有引入jQuery，这会导致AJAX请求根本跑不起来，PictureUrl始终是空字符串。记得在Vue的script标签之前引入jQuery：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

3. 验证返回的图片URL是否有效 #

即使请求成功了，也得确认返回的data.d.PictureUrl是个能正常访问的图片地址。可以在AJAX的success回调里加个日志，看看拿到的URL是什么：

success: function(data) {
  console.log('拿到的图片URL:', data.d.PictureUrl); // 打印到控制台检查
  vm.PictureUrl = data.d.PictureUrl;
}

然后把这个URL复制到浏览器地址栏打开，看看能不能显示图片：

• 如果是相对路径，要确保它相对于当前页面的域名是正确的
• 如果是跨域URL，得确认图片服务器允许你的域名访问（配置了CORS）
• 如果是base64格式，要检查开头是不是data:image/xxx;base64,这种正确格式

4. 加上错误回调排查请求问题 #

万一AJAX请求失败了，你也不知道原因，所以可以加个error回调，方便排查：

error: function(err) {
  console.error('请求用户信息失败:', err);
}

修改后的完整代码 #

<html>
<head>
  <style></style>
</head>
<body>
  <div class="container">
    <div id="editor">
      <img :src="PictureUrl" alt="用户图片" />
    </div>
  </div>
  
  <!-- 先引入jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <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) {
              console.log('图片URL:', data.d.PictureUrl);
              vm.PictureUrl = data.d.PictureUrl;
            },
            error: function(err) {
              console.error('请求失败:', err);
            }
          })
        },
      }
    })
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Vzupo