web-dev-qa-db-ja.com

vue cli 3 –スタイルタグで背景画像を使用

コンポーネントの1つにあるアセットフォルダーの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>

しかし、画像は表示されません。パスは正しいです。私の間違いはどこですか？ご協力いただきありがとうございます。

cssvue.jsvue-cli
14
iamrobin.

コメントで強調表示されているMax Martynovとして、url('~@/assets/image.svg')を使用する必要があります。

Webpackには、アセットを解決する際に特定のルールがあります[1]。

エイリアス（_@_）を解決するには、使用中にwebpackがモジュールリクエストとしてリクエストを処理することが必須です。プレフィックス_~_を使用すると、require('some-module/image.svg')と同様に、リクエストをモジュールリクエストとして扱うようにwebpackが強制されます。

参照資料

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

スタイルバインディングを使用することをお勧めします。このスレッドは本当に役に立ちました link 。

ここでbootstrapカードを使用した例

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

画像はsrc/assets/images/cards.jpgにあります

1
Carlos Zabaleta CarlosZ