【问题标题】: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">

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

【问题讨论】:

  • 它是否记录任何错误?
  • 请显示&lt;img&gt;周围的组件模板的其余部分

标签: 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) 然后在图像中使用这个解析链接

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-02-09
      • 2022-01-21
      • 1970-01-01
      • 2019-10-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多