Home / Questions / 414175
Accepted
Valentina
Asked: 2021-12-13 20:54:40 +0800 CST 2021-12-13 20:54:40 +0800 CST

Failed to import or add image in EXPO React Native?

  • 772

When running the project I get the following error message:

Unable to resolve "./assets/logo.png" from "app\resources\views\screens\Splash.js"

import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
import logo from './assets/logo.png';

It should be noted that the image is correctly hosted in the directory and the way I try to add it is:

<Image source={logo} style={{ width: 305, height: 159 }} />
react-native

2 Answers

  1. Best Answer

    According to the EXPOImages/Static Image Resources documentation :

    Many of the images you'll display in your app won't be available at build time, or you'll want to load some of them dynamically to keep the binary size down.

    Unlike static assets, you'll need to manually specify the dimensions of your image. It is strongly recommended that you use https as well to satisfy app transport security requirements on iOS.

    // GOOD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

    React Native provides a unified way to manage images and other media assets across your Android and iOS apps. To add a static image to your app, put it somewhere in your source tree and reference it like this:

    <Image source={require('./my-icon.png')} />

    But when doing it that way, it is running an error, it must be due to the indications given at the beginning of my answer.

    If there is another alternative that solves this problem: <Image source={require('./my-icon.png')} />it would not hurt to know a solution.

    • 2

  2. Modify the image extension as follows: image.png by image.android.png or image.ios.png and finally <Image source={require('./assets/img/image.android.png')} />

    • 0