NUXTプロジェクトで動的イメージURLを渡す方法

Question

画像URLを子コンポーネントに渡したいが、画像は表示されません。

私は試した v-attr、:attr、:src プロパティ。

ページ/ index.vue

<ThumbNail img-url="assets/img/igsim_intro.png"/>
 _

components/thumbnail.vue

<!-- Failed to resolve directive: attr -->
<img v-attr="imgUrl" /> 

<!-- 404 Not found: http://localhost:3000/assets/img/pds_main.png -->
<img :src="imgUrl" />

<img :attr="{src: imgUrl}" /> 
 _

<script>
export default {
  name: "ThumbNail",
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  }
}
</script>
 _

私が期待する Thumbnail.vue渡されたURLとして画像を表示します。

Answer 1

から - 回答 Aditya Kresna Perandaによって

:image-url inparentcomponent.vueprops inchildcomponentexample.vueと同じではないため、正しく機能していません。

:image-url="require('~/assets/myimage.png')":image-urlを:imageUrlに変更する（props in- childcomponentexample.vue）

結果：:imageUrl="require('~/assets/myimage.png')"

例parentcomponent.vue：

<template>
  <div v-for="item in items" :key="item.id>
    <ChildComponent 
      :imageURL="require(`~/assets/${item.imgURL}`)" 
      :title="item.title"
      :descriptions="item.descriptions"
    />
  </div>
</template>

<script>
import ChildComponent from '~/components/ChildComponentExample.vue'

export default {
components:{
  ChildComponent,
},
data() {
    return {
      items: [
        {
          id: 1,
          imgURL: '01-1.webp',
          title: 'Title1',
          descriptions: 'Lorem ipsum',
        },
        {
          id: 2,
          imgURL: '02-1.webp',
          title: 'Title2',
          descriptions: 'Lorem ipsum',
        },
      ],
    }
  }
} 
</script>

例ChildComponentexample.vue：

<template>
  <div>
    <div>
      <img :src="imageURL" alt="Alt text" />
      <div>
        <h3> {{ title }} </h3>
        <div> {{ descriptions }} </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageURL: {
      type: String,
      required: true,
      default: '',
    },
    title: {
      type: String,
      required: true,
      default: 'Title',
    },
    descriptions: {
      type: String,
      required: true,
      default: 'No descriptions',
    },
  },
}
</script>