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>

但是这张图片没有显示出来。路径是正确的。我的错误在哪里？ 感谢您的帮助。

- iamrobin.

---

请尝试使用url('~@/assets/image.svg')这个链接地址。 - Max Martynov

作为我找到的可能解释之一（使用Google）[that]（https://github.com/vuejs/vue-loader/issues/193#issuecomment-206510064）： vue-html-loader和css-loader将非根URL转换为相对路径。 为了将其视为模块路径，请在前面加上〜前缀。 - Max Martynov

我使用了Vue CLI 3，并尝试了url('~@/assets/image.svg')，但没有成功，我不知道为什么。 - Lying_cat

@CharlesOkwuagwu 我是这样解决的：在模板中，:style="{backgroundImage: 'url('+bgImages[0]+')'}"，在数据中，bgImages: [require("@/assets/images/login/1.png")]。虽然不是最佳实践，但至少它能工作。 - Lying_cat

这对我有用。:style="{ 'background-image' : 'url(' + require('../../../blah/blah_blah/file_name.blah') + ')'}" - Debu Shinobi

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

- j.raymond

---

我花了2天时间才得到一些简单易懂的解释。对于像我这样的非英语母语者来说，文档变得非常非常困难。我认为Vue团队没有在他们的免费资源中描述这一点，这是向后退了一步。这么简单的事情变得如此混乱，Vue仓库上有数百条评论和反应。真希望我能给你投上一百万次赞。 - Abdul Rehman

@Bsienn，我无法表达我有多感激你的评论！但是，我认为赞美应该指向Max和Stackoverflow。我鼓励每个人点赞他的评论 :) - j.raymond

Ragaar和Max，非常感谢你们提供的解决方案。你们两个的描述最终让它起作用，并向我解释了为什么是这样的“Modules/webpack”。这应该是文档中的第一件事，并附有示例。非常感谢。 - Abdul Rehman

Answer 2

我建议使用样式绑定。我发现这个讨论非常有帮助链接.

这里是一个使用Bootstrap卡片的例子

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

这张图片在src/assets/images/cards.jpg中。

- CarlosZ

---

这对我解决了问题 - 经历了很多次迭代 - 但看起来任何在资产文件夹中使用的图像都必须被require()加载才能正常加载（这是我从试错中观察到的，所以请不要把它当作真理）。 - Wally

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>

- Joe L.

Answer 4

这是对我有效的方法。

<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"
        ]
      }

- A Kingscote

Answer 5

如果你的Vue.js使用了file-loader，那么你可以利用import带来的好处。

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

import image from @/assets/image.svg
<script>
export default {
  name: 'component'
}
</script>

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

- leejongseo dev

Answer 6

对我有效的方法如下：

1. 将所需图像移动到公共文件夹中（myapp/public/assets/myimage.png）
2. 构建项目。这将把资产从公共文件夹移动到dist文件夹。

npm run build

3. 现在，您可以像这样在组件中使用您的图像：

<div :style="{background: 'url(' + '\'/assets/myimage.png\'' + ') no-repeat 0 3px'}"  ></div>

- Manuel Reyes

Answer 7

如果您正在使用Vue 3（TypeScript）和Vite 3.2+，请在您的中适当地设置您的基础路径，如下所示。

import { defineConfig } from 'vite';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
});

基础选项用于指定应用程序的基本URL，并自动处理资产路径的解析。

然后，如果您的图像img.jpg在public/images文件夹中，您可以在css中引用它：

background-image: url('/images/img.jpg');

在进行生产环境构建时，这将被解决为：

background-image: url('/subfolder/images/img.jpg');

- Obirieni Simeo