Vuejs image url link

Question

Hi I am really new to vuejs. I try to import a picture then call this picture in the methods.

import image from '@/assets/svg/xxx.svg'

then in the data

data () {
        return {
            image: image
        }
    },

and try to use it

li.style.backgroundImage = "url('this.image')";

But the image is not showing, and image link show as following

http://127.0.0.1:8080/order/detail/29/this.image

I really not sure where i get wrong...Please help...

Answer 1

A another way to doing it using computed property on style attribute :

computed : {
    liStyle(){
        return "background-image : url('" + require('@/assets/svg/xxx.svg') + "')";
    }
}

Template :

<li :style="liStyle"></li>

Answer 2

I think the better (and scalable) solution it's to have a class which sets the styles you want, and add it to the elements, if it have to be dinamically, just add it with :class on some condition.

note: i used an external image path, but it's the same with your local path. And use require() to import images and html

new Vue({
  el: '#example'
})

.li-with-bg-image {
  background-image: url('http://via.placeholder.com/350x150')
}

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

<div id="example">
  <ul>
    <li :class="{'li-with-bg-image': true}"></li>
    <li></li>
    <li class="li-with-bg-image"></li>
  </ul>
</div>

Another options

Using inline styles (using v-bind:style)

new Vue({
  el: '#example'
})

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

<div id="example">
  <ul>
    <li :style="`background-image: url('http://via.placeholder.com/350x150')`"></li>
  </ul>
</div>

Using data section or a computed property binded to style

new Vue({
  el: '#example',
  data: {
    myStyles: `background-image: url('http://via.placeholder.com/350x150')`
  },
  computed: {
    anotherStyles () { 
      return `background-image: url('http://via.placeholder.com/300x150')`
    }
  }
})

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

<div id="example">
  <ul>
    <li :style="myStyles"></li>
    <li></li>
    <li :style="anotherStyles"></li>
  </ul>
</div>

Resources:

Class and style bindings Docs