[Vuejs]-Vue-cli: I can use @ in <template> but not in <style>

by

0👍

If you use

url(../assets/logo.png)

there’s a chance if may not work for deployment due to relative path problems.

The safest way is use inline styles instead:

<template>
  <div v-bind:style= "{ 'background-image': 'url(' + box + ')' }">
    Placeholder
  </div>
</template>

<script>
  // @ is an alias to /src
  import box from '@/assets/box.jpg';

  export default {
    data() {
      return { box };
    }
  }
</script>

Refer to this for more details.

👤kevguy

Leave a comment