如何使用 Vue 的 String 数据和来自后端的数据显示图像？答案

【问题标题】：How can I display an image using data of Vue which is String and from backend?如何使用 Vue 的 String 数据和来自后端的数据显示图像？
【发布时间】：2021-05-24 02:28:55
【问题描述】：

我的项目在数据库中将用户的头像路径保存为 varchar，在后端转换为 String 并使用 JSON 将其发送到前端。如何使用这个字符串通过 Vue 显示图像？

在这里你可以看到： Image URL can be received as a "string" by frontend correctly

我试过了

<img class="user-profile-image" v-bind:src=userProfileImagePath>
<img class="user-profile-image" :src=userProfileImagePath>
<img class="user-profile-image" src=userProfileImagePath>
<img class="user-profile-image" src="userProfileImagePath">

但他们都没有工作。我该怎么办？

【问题讨论】：

它是否记录任何错误？
请显示<img>周围的组件模板的其余部分

标签： html vue.js frontend

【解决方案1】：

给你

new Vue({
  el: "#app",
  data: {
    imageUri: ""
  },
  methods: {
    loadIcon() {
      // You might want to load your data here
      this.imageUri = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27"
    }
  },
  created() {
    this.loadIcon();
  }
})

#app {
  height: 60px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <img v-bind:src="imageUri" />
</div>

【讨论】：

【解决方案2】：

使用 JSON.parse(image_string_path_here) 然后在图像中使用这个解析链接

【讨论】：