我正在尝试检查图像的 url 是否为 404。问题是该函数返回未定义。为什么会这样？
如果我 console.log res 的状态它确实显示 404 所以 if 语句正在执行。
function checkImageURL(url){
fetch(url)
.then(res => {
if(res.status == 404){
console.log(res.status)
return <Image source={require('./Images/default.png')}/>
}else{
return <Image source={{uri: `${url}`}} />
}
})
}
您没有在错误响应中返回任何内容。
添加 .catch 并在其中返回一个组件或 null。例如
function checkImageURL(URL) {
fetch(URL)
.then((res) => {
if (res.status == 404) {
return <Image source={require('./Images/default.png')} />;
} else {
return <Image source={{ uri: `${url}` }} />;
}
})
.catch((err) => {
return <Image source={require('./Images/default.png')} />;
});
}
尽管选定的答案解决了有问题的问题，但我注意到这里的首要问题是 OP 处理返回 404 的图像 uri 的方式。如果您打算在图像的 uri 无效的情况下使用后备图像无论出于何种原因（任何 400 左右的响应），我都建议利用该onError <Image/>props。
我有一个<Avatar/>使用这个props的组件：
import { Image, ImageStyle } from 'react-native'
import React, { useState } from 'react'
import { avatarPlaceholder } from '../../assets/images'
interface Props {
avatar: string;
style: ImageStyle;
}
const Avatar = React.memo((props: Props) => {
const [valid, setValid] = useState(true)
const { avatar, style } = props
return (
<Image
onError={() => setValid(false)}
style={[{
resizeMode: "cover",
borderRadius: 1000,
}, style]}
source={{ uri: valid ? avatar : avatarPlaceholder }}
/>
)
})
export default Avatar
快乐编码！
实际上，您不需要检查图像响应状态是否无法404显示它。您只需要获取您的数据并将其存储在您的状态中，然后检查图像是否可以像下面的示例一样显示。
我并不是你想要构建的东西，但在我看来，你永远不应该请求获取图像。
defaultSource现在有一个props。
<Image
source={{ uri: 'https://example.com/image.png' }}
style={{ height: 200, width: 200 }}
defaultSource={defaultImg}
/>