取得した image url を使って img 要素を作る
Tweet- url が入った results の配列の数だけ、Image コンポーネントを作る
- このコンポーネントに url を props として渡す
- 受け取ったコンポーネントは img 要素の src にそれを使用する
- 画像が出る
app.vue
<template>
<div>
<Search/>
<template v-for="(url, index) in results">
<AppImage :url="url" :key="index"/>
</template>
loading: {{loading}}
</div>
</template>
<script>
import Search from "./components/Search";
import AppImage from "./components/Image";
export default {
name: "App",
components: { Search, AppImage },
computed: {
results() {
return this.$store.getters["search/results"];
},
loading() {
return this.$store.getters["search/loading"];
}
}
};
</script>
<style>
</style>
/components/Image.vue
<template>
<img :src="url">
</template>
<script>
export default {
props: {
url: String
}
};
</script>