Not sure if this is the place to change things, but I have changed some things due to your comments, I stil cant see the pictures, but here is an update of the code:
JS app:
import axios from 'axios';
export default {
name: 'home',
components: {
ImageCard
},
data() {
return {
images: []
}
},
methods: {
fetchImages = () => {
axios
.get("https://foodish-api.herokuapp.com/api/images/pizza")
.then(res => {
console.log(res);
this.setState({ images: res.data.message });
})
.catch(err => console.log(err));
this.images = fetchImages()
});
}
Index.cshtml code here:
<div id="app">
<div class="home">
<li v-for="image in images" :key="image.id">
<img :src="image.url" :alt="image.alt" />
</li>
</div>
Obviously something wrong here but i cant seem to get it right since I cant see the pictures, what is still wrong here? Also, when your refer to something I should do different, please just point me in the right direction of the code :D
you did wrong the following:
fetchImages and never call it.this.setState this undifined function.this.images = fetchImages() will lead you to infinite loop because this is a recursion functionhtml use :src="image.url" to show the image but you get the data as string not object and you must use :src="image"you can check the solution in this codesandbox project
https://codesandbox.io/s/busy-ellis-rcifm?file=/src/App.vue
<template>
<div id="app">
<li v-for="image in images" :key="image.id">
<img :src="image" :alt="image.alt" />
</li>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
images: [],
};
},
mounted() {
axios
.get("https://foodish-api.herokuapp.com/api/images/pizza")
.then((res) => {
this.images = res.data;
})
.catch((err) => console.log(err));
},
};
</script>
Firstly,when you call fetchImages(),you need to set this.images=fetchImages(),so that the data of images will be set.And if you want to display pictures,you can do like this:
<li v-for="image in images" :key="image.id">
<img :src="image.url" :alt="image.alt"/>
</li>