vue中用style添加backgroundimage路径为webpack的带~的工程路径时失效？

Question

我不知道是vue的解析原因吗，还是webpack的解析原因

<template>
  <div>
    <!-- 成功引入的两个方法： -->
    <!-- 1 -->
    <img src="~@/assets/1.jpg">
    <!-- 2 -->
    <div class="img1"></div>
    <!-- 不能成功引入的方法 -->
    <div class="img2" :style="{backgroundImage: 'url(~@/assets/1.jpg)' }"></div>
    <div class="img3" :style="{backgroundImage: 'url(' + Img + ')' }"></div>
  </div>
</template>

<script>
import Img from '~@/assets/1.jpg'

export default {
  components: { Img }
}
</script>

<style>
  .img1{
    background: url('~@/assets/1.jpg')
  }
</style>

路径会挂靠上，但框架不能正确解析成正确的绝对路径，图片也不会显示，我主要是想用background-size的cover效果，有没有大神知道这是怎么回事？

.img3采用import的引用方式，但会报错：

像用<img>标签的src和css里的就能正确引用被解析成正确的绝对路径

Answer 1

可以这样使用：:style="{'background-image':'url('+file+')'}" 这里的file变量是指向通过import引入的图片的vue data的属性，也可以使用字符串模板使之看起来更简洁些。

Answer 2

目前的三种方式都引用成功了。先上代码：

<template>
  <div>
    <!-- 成功引入的三种方法： -->
    <!-- 1 -->
    <img src="~@/assets/1.jpg" width="100">
    <!-- 2 -->
    <div class="img1"></div>
    <!-- 3 -->
    <div class="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>
  </div>
</template>

<script>
import Img from '@/assets/1.jpg'

export default {
  data () {
    return {
      img: Img,
    }
  }
}
</script>

<style>
  .img1{
    width: 100px;
    height: 100px;
    background: url('~@/assets/1.jpg') center center no-repeat;
    background-size: 100px auto;
  }
  .img2{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100px auto;
  }
</style>

只是还是没清楚~和@的区别和用法，只知道先用个@，不行再在前面加个~，就行了