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

【问题标题】：Unable to import images: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided is not a valid name无法导入图像：InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称不是有效名称
【发布时间】：2021-01-10 01:23:17
【问题描述】：

我是 React Native 的新手，我正在尝试将图像导入我的应用程序，但我不断收到此错误：

InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/logo.ab75c327.png”）不是有效名称。

这是我现在的代码：

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

它应该是超级简单的，但由于某种原因它不适合我。我也尝试过使用<Image source={Logo} />，但还是不行。

然后我决定不导入徽标并尝试<Image source='../../../assets/images/logo.png' />。当我这样做时，我不再收到任何错误，但图像根本不显示。

我也尝试过使用其他图像和其他格式，并且在所有情况下我最终都得到了相同的结果。我做错了什么？

【问题讨论】：

我也有同样的问题

标签： javascript reactjs react-native

【解决方案1】：

我不是 react 程序员，但我看到 javascript 导入语句用于模块，而不是图像位置。这可能与它有关，并且与您的错误有关。

有关 javascript 导入语法的更多信息，请参阅 mozilla javascript 文档here。

干杯。

【讨论】：

在 react 中可以从位置导入 css 和图片，示例代码是正确的

【解决方案2】：

你需要使用<img>标签来导入图片，比如：

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

您的代码已更正：

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

【讨论】：