React Native：包含从 API 带来的本地图像的 URL 路径的图像源 URI？

Question

我已经构建了自己的 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 获取绝对数据的效果如何：

问题是 Text 确实有效，所以我知道我正确地获取了我的数据，但有些东西告诉我 React Native Image 的源 URI 东西不理解我传递给它的数据，因为文本之间的空格是假定的成为我的物品。当我使用 require 作为源创建标签时，使用这个确切的数据字符串，它运行良好并显示图像，但我不想将静态字符串带入我的标签，它必须来自 API。

所以我不知道发生了什么，某事告诉我传递到源道具的字符串类型不能被 URI 读取。是这样吗 ？如果是，为什么以及如何解决？

---

如果您一直读到这里，非常感谢，我很抱歉这个非常长的主题，如果我知道如何格式化，可以更好地格式化。如果您对那里发生的事情有所了解，非常感谢。

Answer 1

在核心，React Native 支持 2 种类型的图像：

1. 本地图片：图片需要在运行时使用节点的require([asset_path]) 嵌入到应用中，并且不适用于动态路径。

2. 网络图片。这些是托管到远程服务器的图像，您可以通过通用资源标识符 (URI) 引用它们，并且大多数情况下是有效的 HTTP 或 HTTPS 资源链接。

您正在尝试将 URI 作为无效 (.../assets/images/subfolder/filename.ext) URI 的远程图像传递。

有两种方法可以解决这个问题，并且都适用于移动和网络。

1. 将图像转换为base64并将编码的图像字符串保存在 数据库（暴力破解）

2. 将图像上传到 Amazon AWS 或 Firebase Storage 等云提供商，并将相应的公共链接保存在数据库中。