How can I convert a relative image url to absolute image url in Vue js?

I have a call to my API that gets me the relative path. I want to make it an absolute path by adding the domain name. How can I do this in Vue js?

<img :src="`https://my_domain.com` {{ item.settings.image.path }}>

The item.settings.image.path is the call to my API and returns something like /storage/uploads/my_picture.jpg.

I can't find any resources online and I am not sure about the syntax. I get a parsing error SyntaxError: Unexpected token (8:12) at Parser.pp$4.raise

Solution

Your syntax is wrong, should be:

<img :src="`https://my_domain.com${item.settings.image.path}`">

Example:

new Vue({
  el: "#app",
  data: {
    link: '/vi/MPV2METPeJU/maxresdefault.jpg',
  }
})

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

<div id="app">
  <img :src="`https://i.ytimg.com${link}`">
</div>