vue cli 3 - 在样式标签中使用背景图像

Question

我想在我的一个组件中使用我的资源文件夹中的svg图像作为背景图像。这是我的组件的一个例子：

<template>
  <div class="container"></div>
</template>

<script>
export default {
  name: 'component'
}
</script>

<style scoped lang="scss">
.container {
  height: 40px;
  width: 40px;
  background-image: url('@/assets/image.svg');
}
</style>

但图像没有显示。路径是正确的。我的错误在哪里？谢谢你的帮助。

Answer 1

正如Max Martynov在评论中强调的那样，你应该使用url('~@/assets/image.svg')。

Webpack在解析assets[1]时有一些特定的规则。

为了解析别名（@），正如您所使用的那样，必须将webpack作为模块请求处理请求。使用前缀~强制webpack将请求视为模块请求，类似于require('some-module/image.svg')。

参考

1. https://vuejs-templates.github.io/webpack/static.html#asset-resolving-rules

Answer 2

我建议使用样式绑定。我发现这个线程真的很有帮助link。

这是一个使用bootstrap卡的例子

    <div
      class="card-image"
      :style="{ backgroundImage: 'url(' + require('@/assets/images/cards.jpg') + ')' }">

图像位于src / assets / images / cards.jpg中