ご依頼を検討されている方

【React Native】Imageコンポーネントで画像が表示されない

URLをコピーする
URLをコピーしました!

ReactNativeで画像が表示されない

→私は上記のポイントで苦しみました。

本気ではReact NativeのImageコンポーネントに関するお悩みを解決していきます。

前提条件

React Nativeに関する基礎知識が既にある方を対象にした記事です。

おにちゃん

基礎知識に自信がない方は下記の記事でざっくりとした知識を身につけてみてください。

目次

React NativeのImageで画像が表示されない方

React NativeのImageで画像が表示されない方
React NativeのImageで画像が表示されない方

React Nativeで画像を使いたいと思い、挑戦するも画像が表示されない。

おにちゃん

表示されない方はImageコンポーネントの基礎を学べば問題なしです。


結論:表示されないのは〇〇を指定していないから

結論から言うと、width、heightの指定をしていない可能性が高いです。

style={{ width: 300, height: 300 }}
おにちゃん

上記のように、幅と高さを指定してあげるだけで表示されない問題の大半を解決することができます。


React NativeのImageの使い方

React NativeのImageの使い方
React NativeのImageの使い方

Imageコンポーネントには2通りの画像の表示方法があります。

  • プロジェクト内の画像
  • 外部から画像取得

プロジェクト内の画像を取得する方法

import {Image} from ‘react-native’
<Image
  source={require('../assets/Oniproject1.png')}//←ご自身のファイルを指定してください。
/>

//画像幅を指定したい場合

import {Image} from ‘react-native’
<Image
   source={require('../assets/Oniproject1.png')}//←ご自身のファイルを指定してください。
   style={{ width: 300, height: 300 }}
 />

外部から画像取得する方法

<Image 
   source={{uri: 'https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg'}}
   style={{ width: 300, height: 300 }}
/>
おにちゃん

外部から画像を取得する際には、幅と高さを指定しないとデフォルトでは表示されません。

実際のコード例

<Image
  source={require('../assets/Oniproject1.png')}
/>
<Image 
  source={{uri: 'https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg'}}
/>

上記のコードで出力すると下記のようになります。

おにちゃん

プロジェクト内の画像は幅や高さを指定しなくても表示されますが、外部から画像取得する際は表示されないです。

<Image
  source={require('../assets/Oniproject1.png')}
/>
<Image 
  source={{uri: 'https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg'}}
  style={{ width: 300, height: 300 }}
/>

上記のコードで出力すると下記のようになります。

おにちゃん

幅や高さを指定することで、外部からの画像を表示させることに成功しました。

上記のコードを出力すると下記のようになります。

<Image
  source={require('../assets/Oniproject1.png')}
  style={{ width: 300, height: 300 }}
/>
<Image 
  source={{uri: 'https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg'}}
  style={{ width: 300, height: 300 }}
/>


まとめ:Imageが表示されない方の対処法

まとめ:Imageが表示されない方の対処法

まとめ:Imageが表示されない方の対処法

ここまでで【React Native】Imageコンポーネントで画像が表示されないについて解説してきました。

本記事のまとめ
  • コードの間違いを探す
  • プロジェクト内と外部画像ではコードの書き方が違う
  • 外部画像の場合は幅や高さを指定する
おにちゃん

本記事は以上です。


読者におすすめの記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる