我想使用 AXIOS 在 json 檔案中顯示以 base64 編碼的影像。但我不知道如何正確地做到這一點。在底部，我輸入了一個代碼片段，我如何從 API 中檢索資料以及如何使用 AXIOS 顯示它。
const [data, setData] = useState([])
useEffect(() => {
axios.get('https://api.npoint.io/ddba9b527b972abc4a90')
.then(({data}) => {
console.log("LiquorApp -> data", data.products)
setData(data.products)
})
.catch((error) => console.error(error))
}, []);
const Card = ({item}) => {
return (
<TouchableOpacity
activeOpacity={0.8}
onPress={() => (navigation.navigate('Details', item))}>
<View style={style.card}>
<View style={{height: 100, alignItems: 'center', justifyContent: 'center'}}>
<Image
style={{flex: 1, resizeMode: 'contain'}}
// display here source={item.img}
/>
</View>
</TouchableOpacity>
);
}
資料顯示作業正常，但我不知道如何處理編碼影像。
@edit我像這樣將api資料更改為普通url
"url": "https://i.imgur.com/eGUilqS.png"
我試圖以這種方式顯示它，但它不起作用。
<Image source={{uri: `${item.url}`}}/>
uj5u.com熱心網友回復：
您需要在 base64Encoded 之前添加它
<Image source={{uri: `data:image/png;base64,${encodedBase64}`}} />
uj5u.com熱心網友回復：
@fixed 我必須添加一個確定圖片高度和寬度的樣式。
style={{width: 200, height: 200}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/419826.html
標籤：