React入門

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

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

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

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

 

前提条件

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

おにちゃん
おにちゃん

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

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説ReactNativeとはアプリ開発用のフレームワークです。本記事では基礎入門としてReactNativeの環境構築〜メモアプリまでを解説しています。...

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コンポーネントで画像が表示されないについて解説してきました。

まとめ:表示されない時の対処法
  • コードの間違いを探す
  • プロジェクト内と外部画像ではコードの書き方が違う
  • 外部画像の場合は幅や高さを指定する
おにちゃん
おにちゃん

本記事は以上です。

 

読者におすすめの記事

【デザイン】ReactNative Elementsで今風UIを構築してみよう
【デザイン】ReactNative Elementsで今風UIを構築してみようReact Native ElementsでカッコよいUIを構築する方法について詳しく解説しています。2021年はマテリアルデザインを意識すべし...
【ReactNative編】Webviewを使ってメディアアプリを作ろう
【ReactNative編】Webviewを使ってメディアアプリを作ろうWebviewコンポーネントを活用してアプリ開発してみませんか。本記事を活用すればニュースアプリなどの開発が可能です。...
【React Navigation】 Nativeアプリにナビゲーション導入
【React Navigation】 Nativeアプリにナビゲーション導入React NavitgationをNativeアプリに導入していきましょう。本記事では5つの機能を紹介しています。...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事