Recibo un error al intentar agregar un archivo PNG o SVG a mi código. ¿Cuál es mi error o qué tengo que cambiar para que funcione?
import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' export default function Home() { return ( <div className={styles.container}> <Head> <title>Maintenance</title> <meta name="description" content="This Website is in Maintenance Mode" /> <link rel="icon" href="/favicon.ico" /> </Head> <div className={styles.main}> <h1 className={styles.h1}>This website is currently in</h1> <break></break> <h1 className={styles.h2}>Maintenance Mode.</h1> <Image src="/public/logoicon/logoOrange.png" alt="server and database with broken cable" width={77} height={33} /> <p className={styles.p}>©2022 Karlo-Hosting.com</p> </div> </div> ) }Mi código está arriba.
Si el servidor le envía una respuesta que dice "received text/html; charset=utf-8", intente analizar el error. Puede ver que el servidor dice "Aquí está el contenido de texto/HTML solicitado que tiene el formato UTF-8" .
Compruebe si la fuente de la imagen es correcta. Y si la imagen existe e intente verificar qué contenido de texto/HTML le devuelve el servidor de archivos.
Solución 1. este error está en la terminal derecha, por lo que la carpeta 'pública' está expuesta en el nivel raíz, por lo que no necesita especificar la carpeta pública
prueba esto - src="/logoicon/logoOrange.png"
en lugar de - src="/public/logoicon/logoOrange.png"
Solución 2. aún si obtiene un error de solicitud incorrecta 400 en la consola
entonces es un error de cliente genérico
buscar-> a) sintaxis de cadena de URL b) caché y cookie dañados c) verificar si la imagen es demasiado grande d) verificar si hay espacios en blanco en la carpeta de nombres