Solución:
Esta es una restricción especial agregada por los desarrolladores de create-react-app. Está implementado en ModuleScopePlugin para asegurar que los archivos residan en src/. Ese complemento garantiza que las importaciones relativas del directorio de origen de la aplicación no lleguen fuera de él.
Puede deshabilitar esta función (una de las formas) por eject operación del proyecto create-react-app.
La mayoría de las funciones y sus actualizaciones están ocultas en el interior del sistema create-react-app. Si tu haces eject ya no tendrás algunas características y su actualización. Entonces, si no está listo para administrar y configurar la aplicación incluida para configurar el paquete web, etc., no lo haga eject operación.
Juega según las reglas existentes (muévete a src). Pero ahora puede saber cómo eliminar la restricción: hacer eject y quitar ModuleScopePlugin desde el archivo de configuración del paquete web.
En lugar de eject hay soluciones intermedias, como rewire, que le permite modificar programáticamente la configuración del paquete web sin eject. Pero quitando los ModuleScopePlugin enchufar no es bueno – esto pierde algo de protección y no agrega algunas funciones disponibles en src.
La mejor manera es agregar directorios adicionales que funcionen completamente de manera similar a src. Esto se puede hacer usando react-app-rewire-alias
No importar de public carpeta – que se duplicará en la build carpeta y estará disponible por dos URL diferentes (o con diferentes formas de cargar), lo que finalmente empeorará el tamaño de descarga del paquete.
Importando desde el src La carpeta es preferible y tiene ventajas. Todo se empaquetará mediante paquete web en el paquete con trozos tamaño óptimo y para la mejor eficiencia de carga.
El paquete react-app-rewired se puede utilizar para eliminar el complemento. De esta forma no es necesario que expulse.
Siga los pasos en la página del paquete npm (instale el paquete y cambie las llamadas en el archivo package.json) y use un config-overrides.js archivo similar a este:
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
module.exports = function override(config, env) {
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
return config;
};
Esto eliminará el ModuleScopePlugin de los complementos de WebPack usados, pero dejará el resto como estaba y eliminará la necesidad de expulsarlo.
Si sus imágenes están en la carpeta pública, debe usar
"https://foroayuda.es/images/logo_2016.png"
en tus <img> src en lugar de importar
'../../public/images/logo_2016.png';
Esto funcionará
<img className="Header-logo" src="https://foroayuda.es/images/logo_2016.png" alt="Logo" />