vueで画像が表示されない

Question

前提・実現したいこと

vueでスライドショーを作成したいのですが、image.jpgをdataで渡したものが表示されず困っています。

発生している問題・エラーメッセージ

Error in render: "TypeError: Cannot read property 'url' of undefined"

該当のソースコード

<template>
  <div class="slider">
    <Slides :image="images[0]"/>
  </div>
</template>

<script>
import Slides from './Slides.vue';

export default {
    components: {
      Slides
    },
    data(){
      return{
        images : [
          {
            id: "0",
            url: require("../assets/image1.jpg"),
            title: "どうも"
          },
          {
            id: "1",
            url: require("../assets/image2.jpg"),
            title: "こんにちは"
          },
          {
            id: "2",
            url: require("../assets/image3.jpg"),
            title: "どうもどうも"
          }
        ]
      }
    }
}
</script>

<template>
  <div class="slides">
      {{ image.url }}
      <h1>slides</h1>
      <div class="slideImage" :style="setBackgroundImage()">

      </div>
  </div>
</template>

<script>
export default {
    props: ["image"],
    computed:{
      setBackgroundImage(){
        return {backgroundImage : "url("+this.images.url+")"};
      }
    }
}
</script>

<style>
.slideImage{
  height: 100vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

試したこと

styleでBackgroundImageを一つだけ画像表示はできたのですが、
配列にしてデータを渡して表示させることが出来ませんでした。
前提・実現したいこと

vueでスライドショーを作成したいのですが、image.jpgをdataで渡したものが表示されず困っています。

発生している問題・エラーメッセージ

Error in render: "TypeError: Cannot read property 'url' of undefined"

該当のソースコード

<template>
  <div class="slider">
    <Slides :image="images[0]"/>
  </div>
</template>

<script>
import Slides from './Slides.vue';

export default {
    components: {
      Slides
    },
    data(){
      return{
        images : [
          {
            id: "0",
            url: require("../assets/image1.jpg"),
            title: "どうも"
          },
          {
            id: "1",
            url: require("../assets/image2.jpg"),
            title: "こんにちは"
          },
          {
            id: "2",
            url: require("../assets/image3.jpg"),
            title: "どうもどうも"
          }
        ]
      }
    }
}
</script>

<template>
  <div class="slides">
      {{ image.url }}
      <h1>slides</h1>
      <div class="slideImage" :style="setBackgroundImage()">

      </div>
  </div>
</template>

<script>
export default {
    props: ["image"],
    computed:{
      setBackgroundImage(){
        return {backgroundImage : "url("+this.images.url+")"};
      }
    }
}
</script>

<style>
.slideImage{
  height: 100vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

試したこと

styleでBackgroundImageを一つだけ画像表示はできたのですが、
配列にしてデータを渡して表示させることが出来ませんでした。
こちら解決方法をご教授頂けたら幸いです。
よろしくお願い致します。

Answer 1

Vueでは画像URLをrequire()してあげないと表示されないので、それが原因だと思います。

こんな感じで表示できたので参考にしてください

<template>
  <div>
    <h1>slides</h1>
    <div
      class="slideImage"
      :style="this.setBackgroundImage"
    />
  </div>
</template>
<script>
export default {
  computed: {
    setBackgroundImage() {
      return { backgroundImage: 'url(' + require('@/img/test.jpg') + ')' }
    }
  }
}
</script>
<style>
.slideImage {
  height: 100vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

【追記】
すみません、いろいろ勘違いしていました。

①エラーの件
setBackgroundImageのところ、this.image.urlに直してあげてください。

// 【元のコード】
setBackgroundImage(){
        return {backgroundImage : "url("+this.images.url+")"};
      }

// 【正しいコード】
setBackgroundImage(){
        return {backgroundImage : "url("+this.image.url+")"};
      }

②computedを呼ぶ時は this.computedmethod で呼び出してあげてください

<-- 元のコード -->
<div class="slideImage" :style="setBackgroundImage()">

<-- 正しいコード -->
<div class="slideImage" :style="setBackgroundImage">

②<div>の高さがない
イメージ画像が現れない原因はイメージを設定しているdivに高さがうまく設定できてないからだと思います
試しに<div>hello</div>とかやってみると背景に画像の一部が現れました。
style側であてたものにsetBackgroundImageが上書きしてしまっているのかもしれませんので、そちらであててみてはいかがでしょう。

    // 例
    setBackgroundImage() {
      return { backgroundImage: 'url(' + this.image.url + ')', height:"100vh" }
    }

Comments

[masaya9460]

回答ありがとうございます。
requireを試してみたのですが、表示されず同じエラーが出てしまいました。computedを消した場合<template>で{{ image.title }}が表示されたのでdataの記述は問題ないと思います。
ですが、computedをつけると<template>自体が表示されません。
どうしてでしょうか。

[oec]

私が勘違いしていたようで、ごめんなさい。
回答に追記した部分で解決できそうでしょうか…？

[masaya9460]

回答ありがとうございます。
無事解決することが出来ました！

[oec]

解決できてよかったです！