title: Display card background image from local for the list of item from API
body: <p>Good Day! I am trying to keep the background image for the items that I am fetching from the API. No image is coming from API for the background. In this case, I want to add the background image from my local system based on the item ID. Item ID is one of the unique value I am getting from the API. As of now below code is working for me. Anyone can help me to achieve this in a better way. Thanks in advance.</p>
  <pre><code>&lt;FlatList
                  numColumns={numColumns}
                  data={data, numColumns}
                  renderItem={({ item, index }) =&gt; {
                  
                    return (
                      &lt;Card
                        style={{
                          margin: 8,
                          borderRadius: 16,
                          width: config.deviceWidth * 0.43,
                          height: config.deviceWidth * 0.54,
                          overflow: &quot;hidden&quot;,
                          justifyContent: &quot;space-evenly&quot;,
                          marginLeft: 14,
                        }}
                      &gt;
                        &lt;ImageBackground
                          style={{
                            height: config.deviceWidth * 0.54,
                            width: config.deviceWidth * 0.43,
                          }}
                          source={
                            item.itemID === &quot;1&quot;
                              ? require(&quot;../../../public/myimages/itemID1.png&quot;)
                              : item.itemID === &quot;2&quot;
                              ? require(&quot;../../../public/myimages/itemID2.png&quot;)
                              : item.itemID === &quot;3&quot;
                              ? require(&quot;../../../public/myimages/itemID3.jpg&quot;)
                              : item.itemID === &quot;4&quot;
                              ? require(&quot;../../../public/myimages/itemID4.jpg&quot;)
                              : item.itemID === &quot;5&quot;
                              ? require(&quot;../../../public/myimages/itemID5.jpg&quot;)
                              : item.itemID === &quot;6&quot;
                              ? require(&quot;../../../public/myimages/itemID6.jpg&quot;)
                              : item.itemID === &quot;7&quot;
                              ? require(&quot;../../../public/myimages/itemID7.jpg&quot;)
                              : item.itemID === &quot;8&quot;
                              ? require(&quot;../../../public/myimages/itemID8.jpg&quot;)
                              : item.itemID === &quot;9&quot;
                              ? require(&quot;../../../public/myimages/itemID9.jpg&quot;)
                              : item.itemID === &quot;10&quot;
                              ? require(&quot;../../../public/myimages/itemID10.png&quot;)
                              : require(&quot;../../../public/myimages/img3.jpg&quot;)
                          }
                     
                        &gt;
                        &lt;/Card&gt;
  </code></pre>