uri图像源反应原生不起作用答案

【问题标题】：uri image source react native doesn't workuri图像源反应原生不起作用
【发布时间】：2021-08-23 11:00:11
【问题描述】：

我想通过授权从我的服务器检索图像我尝试了这个解决方案但不起作用，如何解决？

从'axios'导入axios；从 '@react-native-community/async-storage' 导入 AsyncStorage；

const instance = axios.create({
    baseURL:'http://130b57da660e.ngrok.io'
});

instance.interceptors.request.use(
    async (config)=>{
        const token = await AsyncStorage.getItem('token');
        if(token){
            config.headers.Authorization= `Bearer ${token}`;
        }
      
        return config;

    },
    
    (err) => {
        return Promise.reject(err);
    }
)

export default instance;

import ExpressApi from '../api/ExpressApi';


   const ImageApi= ({path,imageStyle})=>{

        <Image style={imageStyle}  source={ JSON.stringify(ExpressApi.get('/'+path))}/> 
}

【问题讨论】：

标签： node.js react-native

【解决方案1】：

我认为问题出在其中一个。

uri 不起作用（可能是由于未经授权或路径完全错误，）
你忘了这样做source={{ uri: "Your image path here"}}

如果我是你，我会尝试记录图像路径并粘贴到浏览器，看看是否可以使用uri 访问图像。因为如果图像需要身份验证，我相信令牌应该附加到 uri 如果不是标头，类似于 xxxxxxxxx.jpg?token="your token"

【讨论】：

【解决方案2】：

根据React Native Docs 上的source 道具说明，您可以将uri 和headers 传递给source 道具。

请尝试：

const ImageApi= ({path, token, imageStyle}) => (
    <Image 
        style={imageStyle}
        source={{
            uri: path,
            headers: {
                authorization: `Bearer ${token}`
            }
        }}/> 
)

【讨论】：