Solicité una imagen de esta receta api (spoonacular) y logré publicar la imagen en mi sitio, pero está ubicada debajo de mi imagen de fondo. Sé cómo mover y editar imágenes, pero no puedo vincular esta en CSS para poder editarla. Aquí está el código .js y el resto. ¿Cómo dirijo la imagen api en CSS? ¡Muchas gracias noob!
Tomás
import axios from 'axios'; const container = document.getElementById('container') // const recipeImage = document.getElementById(`image`) async function fetchImage() { try { const result = await axios.get('https://api.spoonacular.com/recipes/complexSearch?apiKey=...',{ headers:{ "Content-Type": "application/json" }}) const recipe = result.data; console.log(recipe.results[5]); const image = document.createElement('p') const title = document.createElement('h3') title.innerHTML = `<h3>${recipe.results[5].title} </h3>` image.innerHTML = `<img src="${recipe.results[5].image}"/>` container.appendChild(title) container.appendChild(image) } catch (e) { console.error(e); } } fetchImage(); .container{ position: absolute; z-index: auto; left:43%; top: 25%; height: 500px; width: 645px; } <body> <h1> Jouw selectie voor vandaag . . </h1> <header> <img src="../assets/mood&food%20achtergrond%20licht%20patroon.jpg" height="800" width="1695" class="background"/> <a href="index.html"> <img src="../assets/mood&food logo basic.png" height="80px" width="45%" class="logo"/></a> <div id="container"> <h3></h3> <p></p> </div> </header> </body> <script type="module" src="app.js"></script> </html>La clave api necesitaba ser actualizada. Segunda vez que ocurre este problema. Ahora la referencia 'id=container' funcionó y la imagen era editable.