No estoy seguro si este es el lugar para cambiar las cosas, pero he cambiado algunas cosas debido a sus comentarios, todavía no puedo ver las imágenes, pero aquí hay una actualización del código:
Aplicación JS:
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() }); }Código Index.cshtml aquí:
<div id="app"> <div class="home"> <li v-for="image in images" :key="image.id"> <img :src="image.url" :alt="image.alt" /> </li> </div>Obviamente, algo está mal aquí, pero parece que no puedo hacerlo bien ya que no puedo ver las imágenes, ¿qué sigue estando mal aquí? Además, cuando se refiera a algo que debo hacer diferente, solo indíqueme la dirección correcta del código: D
Hiciste mal lo siguiente:
fetchImages y nunca lo llame.this.setState esta función no definida.this.images = fetchImages() lo llevará a un bucle infinito porque esta es una función de recursiónhtml use :src="image.url" para mostrar la imagen, pero obtiene los datos como una cadena, no como un objeto y debe usar :src="image"puedes comprobar la solución en este proyecto de codesandbox
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>En primer lugar, cuando llame a fetchImages() , debe configurar this.images=fetchImages() , para que se configuren los datos de las images . Y si desea mostrar imágenes, puede hacer lo siguiente:
<li v-for="image in images" :key="image.id"> <img :src="image.url" :alt="image.alt"/> </li>