title: React Native : Image source URI containing URL path of local image brought from API?
body: <p>I've built my own API to be able to share my database (and so its data) between my website and my mobile app.
  As we can't really store a real picture in a database, I store there the local relative paths in both website and app folders. This is what it looks like :</p>
  <p><a href="https://i.stack.imgur.com/Xnydi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xnydi.png" alt="enter image description here" /></a></p>
  <p><em>(I'd love to need only one field for both website and app's project structure but that's not today's topic)</em></p>
  <hr />
  <p><br />
  This is how I call my data from API :</p>
  <pre class="lang-js prettyprint-override"><code>    const [isLoading, setLoading] = useState(true);
      const [data, setData] = useState([]);
  
      const getAlbumsFromApi = async () =&gt; {
  
          try {
              const response = await fetch('https://mywebsite.com/api/album');
              const json = await response.json();
              setData(json);
          } catch (error) {
              console.error(error);
          } finally {
              setLoading(false);
          }
  
      }
  
      useEffect(() =&gt; { getAlbumsFromApi(); }, []);
  </code></pre>
  <p>And this is my return code :</p>
  <pre class="lang-js prettyprint-override"><code>&lt;View contentContainerStyle={styles.scrollview}&gt;
  
      &lt;Text style={styles.titre_accueil}&gt;
          Communauté
      &lt;/Text&gt;
  
      {isLoading ? &lt;ActivityIndicator/&gt; : (
  
          &lt;FlatList
              style={styles.liste_albums}
              data={data}
              keyExtractor={({ id_album }, index) =&gt; id_album}
              renderItem={({ item }) =&gt; (
  
                  &lt;View style={styles.element_liste_album}&gt;
  
                      &lt;Image
                          style={styles.album}
                          source={{ uri : item.urlapp }}
                      /&gt;
                                          
                      &lt;Text style={{ color: 'red' }}&gt; {item.urlapp} &lt;/Text&gt;
  
                  &lt;/View&gt;
                                      
              )}
          /&gt;
  
      )}
  
  &lt;/View&gt;
  </code></pre>
  <hr />
  <p>Here, you can see how it results to prove you fetching absolute data from API works well :
  <a href="https://i.stack.imgur.com/a3pvs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3pvs.png" alt="enter image description here" /></a></p>
  <p>The thing is that Text works indeed, so I know I fetch correctly my data, but something tells me React Native Image's source URI thing doesn't understand the data I'm passing into it, as the spaces between text are supposed to be my  items from my . When I create an  tag with require as source, with this exact data string, it works well and display image but I don't want to bring static string into my  tag, it has to come from API.</p>
  <p>So I don't know what's going on, <strong>something tells me the kind of string passed into the source prop can't be readen by URI</strong>. Is that so ? If yes, why and how could I fix it ?</p>
  <hr />
  <p><br />
  If you've readen until this, thanks a lot, I'm sorry for the awfully long topic that could've been formatted way better if I knew how to. Thanks a lot if you have an idea about what's happening there.</p>