Help us understand the problem. What is going on with this article?

Vue CLIでビルドしたら背景画像のパスが合わず表示されない

More than 1 year has passed since last update.

問題点

単一コンポーネント(.vueファイル)内のstyleタグ内に指定した背景画像のパスが、distされたら合わなくなってうまく表示されない。

適用したいCSS
background-image: url("./assets/images/sample.jpg");

開発環境であればもちろんこれで問題なく表示されるが、ビルド ⇨ distされたファイルを確認するとCSSにこのパスがそのまま適用されてしまうため、背景画像が表示されない問題が発生。

解決策

まず、画像のパスを以下のように定義。export文の上あたりに記述すればOK。
(※ @/のあとはsrcより下の階層のパス)

scriptタグ内
import src from '@/assets/images/sample.jpg';

適用したい要素に定義したパスを直接記述する。

templateタグ内
<div class="bg-image" v-bind:style= "{ 'background-image':' url(' + src + ')' }">

結果

distされた背景画像のパスを見ると・・・

distされたindex.html
<div class="bg-image" style="background-image: url('./assets/img/sample.e25529e.jpg');">

これできちんと背景画像が表示された。

ちょっと面倒だが、このままサーバーにアップしてもうまく表示されたのでとりあえずこれで問題ないかな。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした