ReactNativeで画像のURLをComponentに渡して表示させたいです

Question

前提・実現したいこと

ReactNativeで画像のURLをComponentに渡して<Image>で画像を表示させたいです。

発生している問題・エラーメッセージ

urlの値を渡しても表示されません。

Error: Cannot find module '[object Object]'
webpackEmptyContext
/srv/frontend/app/Lottery/components/common sync:2
TicketListComponent
/srv/frontend/app/Lottery/components/common/ticketList.js:13

10 |         width:100,
  11 |         height:50,
  12 |     }} 
> 13 |     source={require({url})}/>
     | ^  14 |     <Text>{title}{data}</Text>
  15 |     </View>
  16 | )

該当のソースコード

<TicketListComponent 
   data={data.bronze_ticket} 
   title="Bronze Ticket" 
   url="../../assets/images/bronze-ticket.png" />

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

const TicketListComponent = ({data, title, url})=>{

    return (
        <View style={{width:'100%',alignItems:'center',backgroundColor:'#fff',}}>
        <Image 
        style={{
            width:100,
            height:50,
        }} 
        source={require({url})}/>
        <Text>{title}{data}</Text>
        </View>
    )
}
export default TicketListComponent;

###試したこと1.{url}の{}を外してみました。

    return (
        <View style={{width:'100%',alignItems:'center',backgroundColor:'#fff',}}>
        <Image 
        style={{
            width:100,
            height:50,
        }} 
        source={require(url)}/>
        <Text>{title}{data}</Text>
        </View>
    )

以下のエラーに変わりました。

Error: Cannot find module '../../assets/images/bronze-ticket.png'
webpackEmptyContext
/srv/frontend/app/Lottery/components/common sync:2
TicketListComponent
/srv/frontend/app/Lottery/components/common/ticketList.js:13

###試したこと２.requireをuriに変更しました

    return (
        <View style={{width:'100%',alignItems:'center',backgroundColor:'#fff',}}>
        <Image 
        style={{
            width:100,
            height:50,
        }} 
        source={{uri:url}}/>
        <Text>{title}{data}</Text>
        </View>
    )

結果はエラーは起きませんでしたが、画像は表示されませんでした。

ご回答いただければ幸いです。

Answer 1

React Nativeは触ったことがないのでもしかしたら違うかもしれないですが、

Error: Cannot find module '../../assets/images/bronze-ticket.png'

これは多分../../assets/images/bronze-ticket.pngが読み込めなかったことを表しているのだと思います。まず、確認ですが、指定したパスにちゃんと画像ファイルはありますか？確認してみてください。
※**「該当のソースコードがあるディレクトリ」**から見て../../assets/images/bronze-ticket.pngです。案外..が多いとか、少ないとかという可能性もあるのでしっかり確認してみてください。

その他、こちらのqiitaの記事で、React Nativeで画像をrequireする時は注意が必要らしいというのもあったので参考にしてみてください。

ちなみに、requireはおそらくCommonJSのrequireのことだと思うので、引数はstringです（link）。最初のrequire({url})は、オブジェクトが引数に渡されているので、多分これがstringキャストされた[object Object]でモジュール（画像）を探しに行こうとしたのだと思います。だから最初の書き方は間違いですね。

すみません。完全なる答えになるかは分かりませんがこれで確認してみてもらえますか？

Comments

[shuhei-o]

React Nativeで画像をrequireする時は注意が必要らしいというのもあったので参考にしてみてください。
→まさにその通りで、component内で条件分岐で画像までのpathを指定するようにしました。