Vue.jsでの背景画像設定でハマった時（v-bindやprops）

背景

実務でmicroCMSから提供されるデータに背景画像の設定が含まれており、そのデータをstyleタグ内のCSSに反映させる必要がありました。

しかし当初はこの実装方法に悩んでしまい、10分ほど時間を費やしてしまいました。

この経験を踏まえ、反省として記事にします。

結論

誤った実装方法

以下は、初めに試みた誤った実装方法です。

import { ref } from 'vue';

const props = defineProps({
  imageUrl: {
    type: String,
  },
});

<style scoped>
  .backImage {
    background-image: url(v-bind(props.imageUrl));
  }
</style>

このコードでは、Vue上ではエラーは発生しませんが、ブラウザ上で警告が表示されました。

正しい実装方法

最終的に辿り着いた正しい実装方法は以下の通りです。

import { ref } from 'vue';

const props = defineProps({
  imageUrl: {
    type: String,
  },
});

const backImage = ref('');

backImage.value = `url(${props.imageUrl})` || '';

<style scoped>
  .backImage {
    background-image: v-bind(backImage);
  }
</style>

解説

上記の正しい実装方法では、まずrefを使って背景画像のURLを格納する変数backImageを作成します。その後、props.imageUrlを使ってbackImage.valueにCSSのurl()関数を使って背景画像のURLをセットします。この値を、styleタグ内のbackground-imageプロパティにバインドすることで、正しく画像が反映されるようになります。

この方法により、ブラウザ上での警告も消え、正常に背景画像が表示されるようになりました。

---

以上のように、Vue.jsでスタイルに動的な背景画像を適用する際には、直接的にv-bindを使用するのではなく、一度変数に格納してからバインドすることが重要です。

同様の課題に直面する方の参考になれば幸いです。