No se puede cargar la imagen desde / directorio público en reactr, siguiente.js, configuración de typescript

Con mi imagen en el directorio público, estoy recibiendo 404 no encontrado con

He estado atrapado en esto durante horas y no tengo idea de lo que está pasando mal. ¿Alguien tiene una idea de lo que está apagado? Código siguiente

Mi .babelrc

{
  "presets": ["next/babel"],
  "plugins": []
}

paquetes.json

  "dependencies": {
    "@zeit/next-typescript": "^1.1.1",
    "next": "^10.0.3",
    "next-ga": "^2.3.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "styled-components": "^5.2.1",
    "tslint": "^6.1.3"
  },
  "devDependencies": {
    "@types/node": "^14.14.14",
    "@types/react": "^17.0.0",
    "typescript": "^4.1.3"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "/src/public/*"]
}

siguiente.config.js

module.exports = {};

Pregunta hecha hace 3 años, 4 meses, 27 días - Por byteninja8245

3 Respuestas:

• Ok - resuelto después de mucho tiempo :facepalm: /public necesitaba estar en el directorio raíz (el mismo nivel que node_modules) y no en /src - ¡espera que esto ayude a alguien más!

  Respondida el Dec 18, 2020 a las 13:14 - por techmaestro

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El error que estás experimentando se debe a que estás intentando cargar una imagen desde el directorio público utilizando una ruta relativa (por ejemplo, src="/signature.png") en lugar de una ruta absoluta.

  Para solucionar este problema, debes asegurarte de usar una ruta absoluta para cargar la imagen. Puedes hacerlo concatenando el prefijo de la URL base de tu aplicación con la ruta relativa de la imagen.

  Aquí te muestro un ejemplo de cómo podrías corregirlo en tu JSX:

  jsx <img src={`${process.env.PUBLIC_URL}/signature.png`} />

  Ten en cuenta que process.env.PUBLIC_URL es una variable de entorno que apunta al directorio público de tu aplicación.

  Además, asegúrate de tener configurada la variable de entorno PUBLIC_URL en tu entorno de desarrollo o producción de React para que apunte al directorio público de tu aplicación.

  Espero que esta solución te haya ayudado a resolver el problema. ¡Déjame saber si tienes alguna otra pregunta!

  Respondida el Dec 19, 2020 a las 13:16 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Aquí tienes algunos pasos que puedes seguir para resolver el problema:

  • Verifica la ruta del archivo: Asegúrate de que la ruta "/signature.png" sea correcta y que el archivo exista en el directorio público.

  • Comprueba la configuración de Webpack: Webpack se utiliza en Next.js para agrupar los recursos. Verifica la configuración de Webpack en el archivo "next.config.js" para asegurarte de que el directorio público esté configurado correctamente como fuente de recursos estáticos.

  • Actualiza las dependencias: Actualiza las dependencias de Next.js y React ejecutando los siguientes comandos:

  
  npm update next react react-dom
  

  • Intenta con la compilación en modo de producción: La compilación en modo de producción optimiza los recursos estáticos y puede resolver problemas con la carga de archivos. Ejecuta el siguiente comando:

  
  npm run build
  npm start
  

  • Comprueba el servidor: Asegúrate de que el servidor esté configurado para servir archivos estáticos desde el directorio público. Verifica la configuración del servidor en el archivo "server.js" o "index.js".

  • Usa la propiedad "publicAccess" en "tsconfig.json": Agrega la siguiente propiedad a tu archivo "tsconfig.json":

  
  {
    "compilerOptions": {
      ...
      "publicAccess": true
    },
    ...
  }
  

  • Limpia la caché del navegador: Borra la caché del navegador para asegurarte de que esté cargando los archivos más recientes.

  Espero que estos pasos te ayuden a resolver el problema. Déjame saber si necesitas más ayuda.

  Respondida el Dec 19, 2020 a las 13:19 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---