Soy nuevo en el uso de Heroku y descubrí que un conjunto específico de imágenes que funcionó bien localmente muestra enlaces rotos en mi aplicación implementada. El error de la consola es "Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado)"
La aplicación es una aplicación Vanilla Js con Immutable JS y un servidor Node Express que consume datos de la API de Nasa Mars Rover.
Mi servidor realiza una solicitud Get al hacer clic y obtiene datos y una serie de imágenes para 3 Mars Rovers. Como la api de la Nasa no incluía imágenes de los rovers reales, solo las imágenes tomadas por el rover, encontré imágenes para cada uno, almacenadas en mi carpeta de activos locales y mostradas a través de las llamadas a la api así:
<img src='https://mars-rover-dashboard-app.herokuapp.com/public/assets/images/${ roverData.rover.get("name") + ".png"}' alt='rover image' class='sidebar__main-rover-img'>Investigué el problema y pensé que podría deberse a que se refiere a una ruta que solo existe localmente, y no en la aplicación Heroku en sí. Agregué la URL de mi aplicación Heroku y todavía no funciona. ¿No estás seguro de qué más probar?
No estoy exactamente seguro de cuál es su problema, pero la solución a continuación me ayudó a publicar imágenes en Heroku. Crear una ruta para servir imágenes fue más fácil y mejor cuando se trata de consumirlo desde las interfaces js.
Ruta para servir imágenes
app.get('/images/:id', jsonParser, (req, res) => { const id = req.params.id res.sendFile(id, { root: './images' }) })Coloque la carpeta de imágenes donde está su archivo app.js y en su interfaz proporcione una fuente como esta.
<img src="/images/rovername.png" /> Esto creará una solicitud de obtención para su ruta /images con el nombre de la imagen como
https://mars-rover-dashboard-app.herokuapp.com/images/rovername.png .
Al final, solo escribí la lógica para devolver imágenes con rutas absolutas del sitio web de la NASA. Tal vez no sea la solución más elegante, pero sí una solución rápida para que funcione por ahora. En mi investigación, descubrí la configuración de cubos S3 en Amazon Web Services, esto es algo que analizaré para futuras modificaciones de esta aplicación.