vue cli 3 –在样式标签中使用背景图片

Question

我想将组件之一中我的Assets文件夹中的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在解决资产^[1]时有一些特定的规则。

为了解析别名（@），在您使用时，强制Webpack将请求作为模块请求进行处理。使用前缀会~强制webpack将请求视为模块请求，类似于require('some-module/image.svg')。

 

参考文献

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

Answer 2

我建议使用样式绑定。我发现这个线程非常有用的链接。

这是使用引导卡的示例

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

图像在 src/assets/images/cards.jpg

Answer 3

确保图像扩展名是小写的。如果图像的扩展名是大写的，请将其更改为小写，否则它将不起作用。

<style lang="scss">
  .section{
    background-image: url('~@/assets/photos/DSC08611.jpg'); //WORKED!
    background-image: url('~@/assets/photos/DSC08611.JPG'); //DID NOT WORK
  }

</style>