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')。

参考

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

Answer 2

我建议使用样式绑定。我发现该线程确实很有帮助link。

以下是使用引导卡的示例

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

图片位于src / assets / images / cards.jpg

Answer 3

这对我有用。

<div
  class="image"
  v-for="(image, imageIndex) in slideshow"
  :key="imageIndex"
  :style="{ backgroundImage: 'url(' + require(`@/assets/${image}`) + ')', width: '300px', height: '200px' }"
></div>

slideshow 的样子：

data() {
      return {
        slideshow : [
          "MyImages/1.png",
          "MyImages/2.png"
        ]
      }

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

3 个答案:

参考