APIで取ってきた画像をVueでbackground-imageを指定する

Vue.jsでbackground-imageを指定する

APIで取得してきたものをhtml内でなんとか指定したいっていう感じ

諦めてimgタグでレイアウト整えようとしたところで解決したので、感動した。

vueなどで普段から書いているフロントエンドエンジニアたちにとってこの書き方ができるかできないかで生涯年収が2倍違うと言っても過言。

index.vue

<template>
  <div :style="{backgroundImage: 'url(' + img[img.length-1].img_url + ')'}">
    HelloWorld!
  </div>
</template>

<script>
export default {
  async asyncData() {
    return await axios
      .get('/api/img/get_img')
      .then(res => {
        return {
         img: res.data.details.img
        }
      })
      .catch(error => {
        // throw error;
      });
  },
}
</script>