我已經構建了自己的 API，以便能夠在我的網站和我的移動應用程式之間共享我的資料庫（以及它的資料）。由于我們無法真正將真實圖片存盤在資料庫中，因此我將網站和應用程式檔案夾中的本地相對路徑存盤在那里。這是它的樣子：
（我希望網站和應用程式的專案結構只需要一個欄位，但這不是今天的主題）
這就是我從 API 呼叫資料的方式：
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
const getAlbumsFromApi = async () => {
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(() => { getAlbumsFromApi(); }, []);
這是我的回傳代碼：
<View contentContainerStyle={styles.scrollview}>
<Text style={styles.titre_accueil}>
Communauté
</Text>
{isLoading ? <ActivityIndicator/> : (
<FlatList
style={styles.liste_albums}
data={data}
keyExtractor={({ id_album }, index) => id_album}
renderItem={({ item }) => (
<View style={styles.element_liste_album}>
<Image
style={styles.album}
source={{ uri : item.urlapp }}
/>
<Text style={{ color: 'red' }}> {item.urlapp} </Text>
</View>
)}
/>
)}
</View>
在這里，您可以看到結果如何證明您從 API 獲取絕對資料作業正常：
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.
So I don't know what's going on, something tells me the kind of string passed into the source prop can't be readen by URI. Is that so ? If yes, why and how could I fix it ?
如果你讀到這里，非常感謝，我很抱歉這個非常長的主題，如果我知道如何格式化的話，它本來可以更好地格式化。非常感謝，如果您對那里發生的事情有所了解。
uj5u.com熱心網友回復：
在 Core 中，React Native 支持 2 種型別的影像：
本地影像：影像需要在運行時使用節點嵌入應用程式，
require([asset_path])而不適用于動態路徑。網路影像。這些是托管到遠程服務器的影像，您通過通用資源識別符號 (URI) 參考它們，并且大多數時間是有效的
HTTP或HTTPS資源鏈接。
您正在嘗試將 URI 作為遠程影像傳遞，該影像是無效的 (.../assets/images/subfolder/filename.ext) URI。
有兩種方法可以解決此問題，并且都適用于移動設備和 Web。
將影像轉換為 base64 并將編碼的影像字串保存在資料庫中（蠻力解決方案）
將影像上傳到 Amazon AWS 或 Firebase Storage 等云提供商，并將相應的公共鏈接保存在資料庫中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/402348.html
標籤：