无法导入图像：InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称不是有效名称

Question

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?

Answer 1

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.

Answer 2

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>
    );
}