やる事
「画像を投稿して、投稿した画像にコメントを付けたい」
「コメントページは別ページ」
「別ページの背景を投稿画像にしたい。」
できるだけ頭を使わずにVue.js/Nuxt.jsでやっていきましょう。
方法
ページ内の要素をdivで包む
<template>
<div>
<!-- ここに中身。カニ味噌とか -->
</div>
</template>
div要素のスタイルをバインド
バインド自体はsrcなどの属性に対して行うのとまったく同じ。
<template>
<div v-bind:style="pageStyle">
<!-- ここに中身。ウニとか -->
</div>
</template>
スクリプトで背景要素を設定する。
連想配列にスタイルを書いていく。CSSのプロパティは通常ケバブケースだが、ここではキャメルケースで書くこと。
あと"url('ebikaniuni')"の中にURLを入れる部分に注意。落ち着いて書きましょう。
ちなみにTemplate部に直で書いてもOKだったりする。とても読みにくくなるけど...。
<script>
export default {
data() {
return {
pageStyle: {
// 背景変更用スタイル
backgroundImage: "", // 背景読み込み前なので空白
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
backgroundPosition: "center center",
}
};
},
created() {
this.pageStyle.backgroundImage = "url('" + gazouNoUrl + "')";
// クォートをいい感じにエスケープする必要がある点に注意。
},
}
</script>
もっといい方法があったら教えてクレメンス