How can I display an image using data of Vue which is String and from backend?

Question

My project saves users' profile images path in the database as varchar which is transfer into String in the backend and use JSON to send it to the frontend. How can I use this string to display an image by Vue?

Here you can see: Image URL can be received as a "string" by frontend correctly

I have tried for

<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">

But they all didn't work. How can I do?

Please show the rest of the component template surrounding the <img> — Dan
– Dan, Commented Feb 21, 2021 at 19:04

Captain Timothy · Accepted Answer · 2021-02-22 05:57:52Z

1

Here you go

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>

edited Feb 22, 2021 at 5:57

answered Feb 22, 2021 at 5:45

Captain Timothy

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RoshaanAli · Accepted Answer · 2021-02-21 19:50:41Z

0

use JSON.parse(image_string_path_here) then use this parse link in image

answered Feb 21, 2021 at 19:50

RoshaanAli

1561 silver badge9 bronze badges

Collectives™ on Stack Overflow

How can I display an image using data of Vue which is String and from backend?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related