Unable to import images: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name

user_14205821 0
Viewed 608

I'm very new to React Native, and I'm trying to import an image into my app but I keep gettin this error:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.ab75c327.png') is not a valid name.

This is my code right now:

import React from 'react';
import {Text, View, Image} from 'react-native';

import style from './styles';
import Logo from '../../../assets/images/logo.png';

export default () => {
    return (
        <View>
            <Logo />
        </View>
    );
}

It should be something super simple, but for some reason it isn't working for me. I also tried using <Image source={Logo} /> as well, but still doesn't work.

I then decided not to import the Logo and tried <Image source='../../../assets/images/logo.png' />. When I do this, I no longer get any errors, but the image simply doesn't show up.

I have tried with other images and other formats as well, and in all cases I end up getting the same results. What am I doing wrong?

react-native reactjs javascript
2 Answers

You need to import the image using the <img> tag, like:

<img src={Logo} alt='logo'/>

Your code corrected:

import React from 'react';
import {Text, View, Image} from 'react-native';

import style from './styles';
import Logo from '../../../assets/images/logo.png';

export default () => {
    return (
        <View>
            <img src={Logo} alt='logo'/>
        </View>
    );
}
user_39414300

I'm not a react programmer but I see the javascript import statement is for modules, not images locations. That might have something to do with it and gels with your errors.

See mozilla javascript docs here for more info on the javascript import syntax.

Cheers.

user_39283030
Related