我想使用一個(gè)組件的assets文件夾中的svg圖像作為背景圖像。下面是我的組件的一個(gè)示例:

<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>

但是圖像沒(méi)有顯示出來(lái)。路徑是正確的。我錯(cuò)在哪里？ 謝謝你的幫助。

正如評(píng)論中強(qiáng)調(diào)的Max Martynov，您應(yīng)該使用url('~@/assets/image.svg ')。

Webpack在解析資產(chǎn)時(shí)有一些特定的規(guī)則[1]。

為了解析別名(@)，正如您所使用的，webpack必須將請(qǐng)求作為模塊請(qǐng)求來(lái)處理。使用前綴~強(qiáng)制webpack將請(qǐng)求視為模塊請(qǐng)求，類(lèi)似于require('some-module/image.svg ')。

參考 https://vuejs-templates . github . io/web pack/static . html # asset-resolving-rules 我建議使用樣式綁定。我發(fā)現(xiàn)這個(gè)帖子是非常有用的鏈接。

這里有一個(gè)使用自舉卡的例子

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

圖片在src/assets/images/cards.jpg中

確保圖像擴(kuò)展名是小寫(xiě)的。如果圖像有大寫(xiě)擴(kuò)展名，將其更改為小寫(xiě)，否則將無(wú)法工作。

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

</style>

這是對(duì)我有用的。

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

幻燈片顯示看起來(lái)像:

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

對(duì)我有用的是以下幾點(diǎn):

將所需圖像移動(dòng)到公共文件夾(myapp/public/assets/myimage . png) 構(gòu)建項(xiàng)目。這將把資產(chǎn)從public文件夾移動(dòng)到dist文件夾。 npm運(yùn)行構(gòu)建

現(xiàn)在，您可以像這樣在組件中使用您的圖像:

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

如果您的vuejs使用文件加載器，您將利用導(dǎo)入。

<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>

如果你使用的是Vue 3 (TypeScript)和Vite 3.2+，在你的vite.config.ts中，適當(dāng)?shù)脑O(shè)置你的base，如下圖所示。

import { defineConfig } from 'vite';

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

base選項(xiàng)用于指定應(yīng)用程序的基本URL，它自動(dòng)處理資產(chǎn)路徑的解析。

如果你的圖像img.jpg在public/images文件夾中，你可以在你的css中引用它:

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

在為生產(chǎn)而構(gòu)建時(shí)，這將被解析為:

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