react native 路径对，但读取图片错误问题

最新推荐文章于 2025-05-08 08:09:51 发布

原创最新推荐文章于 2025-05-08 08:09:51 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native 路径对但读取图片错误问题

移动web 同时被 3 个专栏收录

15 篇文章

订阅专栏

webapp

11 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文通过一个React Native应用实例展示了如何使用Image组件加载本地及远程图片，并指出了确保图片路径正确的注意事项。

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

export default class Demo03Component extends Component{
    constructor(){
        super();
        this.state={
            imgUrl:'http://176.51.6.120:80/ajia_code/img/404/404_img1.png'
        }
    }

    render(){
        return <View>
            <Image style={{width:50,height:50}} source={require('../../../img/1.jpg')}></Image>
            <Image style={{width:50,height:50}} source={{uri:"http://176.51.6.120:80/ajia_code/img/404/404_img1.png"}}></Image>
        </View>
    }
}

后来才发现图片后缀名都为小写才对，也就是图片真实后缀和代码都是.jpg才对。