Solución:
Si tiene preguntas sobre la creación React App Le animo a leer su Guía del usuario.
Responde a esta y muchas otras preguntas que pueda tener.
En concreto, para incluir una imagen local tienes dos opciones:
-
Usar importaciones:
// Assuming logo.png is in the same folder as JS file import logo from './logo.png'; // ...later <img src={logo} alt="logo" />
Este enfoque es excelente porque todos los activos son manejados por el sistema de compilación y obtendrán nombres de archivo con hash en la compilación de producción. También obtendrá un error si el archivo se mueve o se elimina.
La desventaja es que puede volverse engorroso si tiene cientos de imágenes porque no puede tener rutas de importación arbitrarias.
-
Utilice la carpeta pública:
// Assuming logo.png is in public/ folder of your project <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />
Este enfoque generalmente no se recomienda, pero es excelente si tiene cientos de imágenes e importarlas una por una es demasiado complicado. La desventaja es que debe pensar en la destrucción de caché y tener cuidado con los archivos movidos o eliminados.
¡Espero que esto ayude!
Si desea cargar una imagen con un local relative URL como lo estás haciendo. El proyecto React tiene un valor predeterminado public carpeta. Deberías poner tu images carpeta en el interior. Funcionará.
Tiene diferentes formas de lograr esto, aquí hay un ejemplo:
import myimage from './...' // wherever is it.
en su etiqueta img solo ponga esto en src:
<img src={myimage}...>
También puede consultar los documentos oficiales aquí: https://facebook.github.io/react-native/docs/image.html