0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ReactNative:Images.xcassetsに登録した画像の読み込みに失敗する

Last updated at Posted at 2015-04-11

ReactNativeのアプリで、ImageSetの画像の読み込みに失敗した。
読み込む画像の名前を見直したことで解決したので、解決方法をまとめる。
iOSアプリ詳しくないので間違ってたらツッコミお願いします。。

[2015/04/11 追記]
issueありました。。

TL;DR

ImageSetの名前と、登録する画像ファイル名は、大文字小文字含めて一致させること!

<ImageSetの名前(大文字小文字一致)>+<なんでもいい>+<拡張子>

発生した問題

Imageコンポーネントにsource={require('image!<名前>')}を指定すると、以下のエラーになった。

Requiring unknown module "image!<名前>" .

参考にしたstackoverflowのページに、発生した問題のスクリーンショットがあるので、そちらを見れば分かやすいです。

ソース

読み込もうとしたImageSetは"aws_icon_iam"という名前。登録したファイル名は以下通り。

  • Deployment_Management_IAM.png
  • Deployment_Management_IAM_1.png
  • Deployment_Management_IAM_2.png

解決

この回答に従った。
[Trouble requiring image module in React Native - stackoverflow]
(http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native/29381280#29381280)

I had similar problem, then renamed the image files in file system under the xcode project's Images.xcassets directories with suffixes and capitalization to match the image I'm loading.

For example, if source={require('image!Villagers')} it required the image files named precisely as Villagers.png, Villagers@2x.png and Villagers@3x.png. If the '@3x' part of filename wasn't there, the image would not get found.

回答によれば、(ファイルシステム上の)ファイル名と、ImageSetの名前が(大文字小文字含め)一致しないと駄目らしい。
そのため、以下のようにファイル名とImageSetの名前を同じにしたところ、問題が解決した。

差分

diff --git a/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json b/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
index 5d728bb..2557241 100644
--- a/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
+++ b/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
@@ -3,21 +3,21 @@
     {
       "idiom" : "universal",
       "scale" : "1x",
-      "filename" : "Deployment_Management_IAM-1.png"
+      "filename" : "aws_icon_iam.png"
     },
     {
       "idiom" : "universal",
       "scale" : "2x",
-      "filename" : "Deployment_Management_IAM.png"
+      "filename" : "aws_icon_iam@2x.png"
     },
     {
       "idiom" : "universal",
       "scale" : "3x",
-      "filename" : "Deployment_Management_IAM-2.png"
+      "filename" : "aws_icon_iam@3x.png"
     }
   ],
   "info" : {
     "version" : 1,
     "author" : "xcode"
   }
-}

補足

  • 大文字小文字の一致は必要。"aws_icon_iam"というImageSetに対し、"aws_icon_Iam.png","aws_icon_Iam@2x.png","aws_icon_Iam@3x.png"を登録したら同じエラーが発生した。
  • ファイル名の末尾は"_1", "@2x", "__1"などにしても大丈夫だった。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?