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