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

【问题标题】：vue cli 3 – use background image in style tagvue cli 3 – 在样式标签中使用背景图片
【发布时间】：2019-01-19 14:28:57
【问题描述】：

我想在我的一个组件中使用我的资产文件夹中的 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>

但图片不显示。路径是正确的。我的错误在哪里？感谢您的帮助。

【问题讨论】：

我已经尝试了所有可能的路径。
你能试试url('~@/assets/image.svg')吗？
谢谢，成功了！你能解释一下为什么要使用@和~吗？文档将它们都解释为模块请求
作为我发现的一种可能的解释（使用 Google）that:vue-html-loader 和 css-loader 将非根 URL 转换为相对路径。为了将其视为模块路径，请在其前面加上 ~
我使用了 vue cli 3 并尝试了 url('~@/assets/image.svg') 但这不起作用，我不知道为什么。

标签： css vue.js vue-cli

【解决方案1】：

作为在 cmets 中突出显示的 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

【讨论】：

花了我 2 天的时间才得到一些直接的解释。对于像我这样的非英语母语的人来说，文档变得非常困难。我认为 vue 团队没有在他们的免费资源中描述它。如此简单的事情变得如此令人困惑，vue repo 上有一个问题，有数百个 cmets 和对此的反应。希望我能投票给你一百万次。
@Bsienn，我无法表达我多么感谢您的评论！但是，我认为表扬应该指向 Max 和 Stackoverflow。我鼓励每个人都支持他的评论:)
Ragaar 和 Max 谢谢，确实提供了解决方案。他和你的描述最终都成功了，并向我解释了为什么它是“模块/webpack”的方式。这应该是文档中的第一件事，并在某处提供示例。非常感谢

【解决方案2】：

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

这里是使用引导卡的示例

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

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

【讨论】：

这为我解决了这个问题 - 经历了多次迭代 - 但看起来资产文件夹中使用的任何图像都必须需要（）才能正确加载（这是我从反复试验中观察到的） - 所以请不要把它当作福音）

【解决方案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"
        ]
      }

【讨论】：

【解决方案4】：

确保图片扩展名是小写的。如果图像有大写扩展名，请将其更改为小写，否则将无法正常工作。

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

</style>

【讨论】：