Estoy tratando de simplemente representar una imagen PNG que he colocado en el directorio ./public/assets/images en mi proyecto Next JS. He usado el paquete next-images para lo mismo. Sin embargo, sigo recibiendo un error que dice
./public/assets/images/delivery-boy.png TypeError: unsupported file type: undefined (file: undefined)Aquí está mi código para ese componente.
import React from 'react' import deliveryBoy from '../../../public/assets/images/delivery-boy.png' import Image from 'next/image' const MedicalStoreScreen = () => { return ( <div className="med-store-screen" > <div className="section-title-container"> <div className="heading">Medical Store</div> <div className="sub-heading">medicine home delivery</div> </div> <div className="med-store-info-container"> <div className="img-container"> <img src={deliveryBoy} /> </div> <div className="content-container"> <div className="content">24/7 Delivery in 30 minutes</div> <div className="content">Upto 30% discount</div> </div> </div> </div> ) } export default MedicalStoreScreen Aquí está el código para mi archivo next.config.js
const withImages = require('next-images') module.exports = withImages()¿Puede alguien sugerir qué está pasando mal al representar esta imagen PNG en mi aplicación Next JS?
No estás utilizando la siguiente imagen cuando usas "img"
Asegúrese de que la ruta de la imagen también sea correcta. Parece que el problema podría ser la ruta: "../../../public/assets/images/delivery-boy.png".
También debe usar Imagen, no img. Como esto:
<Image className="" src={deliveryBoy} width={10} height={10} alt="" />También puede llamar a la imagen desde la nube o Internet agregando la URL de esta manera:
<Image className="" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width={10} height={10} alt="" />No olvides agregar el ancho, alto y alt. Puede dejar el "alt" en blanco.
Next.js no nos permite importar ninguna imagen en un archivo .js , por lo que se pueden usar los siguientes pasos para representar la imagen en Next.js:
public ( logo.png por ejemplo)<img src="/public/images/logo.png" /> ./public indica que el archivo se encuentra dentro de la carpeta púbica, no es necesario tener nada antes./public/image describe que en la carpeta pública vaya a la carpeta de imágenes/public/image/logo.png ruta completa de la imagen.Si intenta almacenar la imagen en cualquier otra carpeta que no sea pública, no se procesará.