在React Native中，如果图像URL响应为空，如何显示本地占位图像？

huangapple
go评论113阅读模式
英文:

How to display local placeholder image if image url response is null in react native

问题

我试图显示一张图片，其源URI来自API调用。如果URI是正确的字符串格式链接，则完全正常工作。但如果URI链接为null或无效链接，我想显示一个本地可用的占位图像（placeholder2）。

代码：

  1. <Image
  2.   style={styles.postImage}
  3.   source={{
  4.     uri: imageUrl,
  5.   }}
  6.   defaultSource={require('../assets/images/placeholder1.png')}
  7. />

我知道defaultSource用于在真实图像加载时显示临时图像。

我的问题是，如果来自响应的URI为null，我看到了这个错误：

在React Native中，如果图像URL响应为空，如何显示本地占位图像？

但如果我将代码更改为以下内容，我看到空白图像（灰色）：

  1. <Image
  2.   style={styles.postImage}
  3.   source={{
  4.     uri: imageUrl || 
  5.     "require('../assets/images/placeholder2.png')",
  6.   }}
  7. />

在React Native中，如果图像URL响应为空，如何显示本地占位图像？

并在上述代码中添加default source后，我可以看到placeholder1图像而不是placeholder2：

  1. <Image
  2.   style={styles.postImage}
  3.   source={{
  4.     uri: imageUrl || 
  5.     "require('../assets/images/placeholder2.png')",
  6.   }}
  7.   defaultSource={require('../assets/images/placeholder1.png')}
  8. />

有人能帮我修复这个问题吗？
提前感谢。

更新：

@louieKim的答案实际上对我有用

  1. <Image source={imageUrl ? {uri: imageUrl} : require('../assets/images/placeholder2.png')} />
英文:

I'm trying to show an image for which the source Uri is received from the API call.
It is working totally fine if the Uri is a correct link in a string format. But if the Uri link is null or not a valid link I would like to show a placeholder image(placeholder2) that is available locally.

Code:

  1.        &lt;Image
  2.           style={styles.postImage}
  3.           source={{
  4.             uri: imageUrl,
  5.           }}
  6.           defaultSource={require(&#39;../assets/images/placeholder1.png&#39;)}
  7.         /&gt;

I know defaultSource is used to show a temporary image when the real image is being loaded

My problem is if the Uri is null from the response, I'm seeing this error

在React Native中，如果图像URL响应为空，如何显示本地占位图像？

But if I change the code to this, I see blank image (gray color)

  1.        &lt;Image
  2.           style={styles.postImage}
  3.           source={{
  4.             uri: imageUrl || 
  5.             &quot;require(&#39;../assets/images/placeholder2.png&#39;)&quot;,
  6.           }}
  7.         /&gt;

在React Native中，如果图像URL响应为空，如何显示本地占位图像？

And upon adding default source to the above code I can see the placeholder1 image instead of placeholder2

  1.        &lt;Image
  2.           style={styles.postImage}
  3.           source={{
  4.             uri: imageUrl || 
  5.             &quot;require(&#39;../assets/images/placeholder2.png&#39;)&quot;,
  6.           }}
  7.           defaultSource = {require(&#39;../assets/images/placeholder1.png&#39;)}
  8.         /&gt;

Can someone help me to fix this?
Thanks in advance.

Update:

Answer by @louieKim actually worked for me

  1.  &lt;Image source={imageUrl ? {uri: imageUrl} : require(&#39;../assets/images/placeholder2.png&#39;)} &gt;

答案1

得分: 1

你可以这样做...

  1. import * as React from 'react';
  2. import { Text, View, StyleSheet, Image, ActivityIndicator } from 'react-native';
  4. const url = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
  5. const placeholder = require('./assets/snack-icon.png');
  7. export default class App extends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     this.state = {
  11.       imageSource: null,
  12.     };
  13.   }
  15.   componentDidMount() {
  16.     this.getImageSource(url);
  17.   }
  19.   getImageSource = url => {
  20.     if (url) {
  21.       this.setState({ imageSource: { uri: url } });
  22.     } else {
  23.       this.setState({ imageSource: placeholder });
  24.     }
  25.   };
  27.   onErrorImage = () => {
  28.     this.setState({ imageSource: placeholder });
  29.   };
  31.   render() {
  32.     return (
  33.       <View style={styles.container}>
  34.         <Image
  35.           source={this.state.imageSource}
  36.           style={{ width: 100, height: 100 }}
  37.           onError={this.onErrorImage}
  38.         /> 
  39.       </View>
  40.     );
  41.   }
  42. }

如果我理解正确，请点赞。

英文:

you can do like this...

  1. import * as React from &#39;react&#39;;
  2. import { Text, View, StyleSheet, Image, ActivityIndicator } from &#39;react-native&#39;;
  4. const url = &#39;https://homepages.cae.wisc.edu/~ece533/images/airplane.png&#39;;
  5. const placeholder = require(&#39;./assets/snack-icon.png&#39;);
  7. export default class App extends React.Component {
  8.   constructor(props) {
  9.     super(props);
  10.     this.state = {
  11.       imageSource: null,
  12.     };
  13.   }
  15.   componentDidMount() {
  16.     this.getImageSource(url);
  17.   }
  19.   getImageSource = url =&gt; {
  20.     if (url) {
  21.       this.setState({ imageSource: { uri: url } });
  22.     } else {
  23.       this.setState({ imageSource: placeholder });
  24.     }
  25.   };
  27.   onErrorImage = () =&gt; {
  28.     this.setState({ imageSource: placeholder });
  29.   };
  31.   render() {
  32.     return (
  33.       &lt;View style={styles.container}&gt;
  34.           &lt;Image
  35.             source={this.state.imageSource}
  36.             style={{ width: 100, height: 100 }}
  37.             onError={this.onErrorImage}
  38.           /&gt; 
  39.       &lt;/View&gt;
  40.     );
  41.   }
  42. }

If i am correct, upvote pls.

答案2

得分: 1

你可以简单地在这里遵循老式的方法：

  1. {imageURl!=null && <Image
  2.           style={styles.postImage}
  3.           source={{
  4.             uri: imageUrl 
  5.           }}
  6.         />}
  7.     
  8. {imageURl==null && <Image
  9.           style={styles.postImage}
  10.           source={{
  11.             uri: '../assets/images/placeholder2.png'
  12.           }}
  13.         />}
英文:

You can simply follow the old-school approach here:

  1.  {imageURl!=null &amp;&amp; &lt;Image
  2.           style={styles.postImage}
  3.           source={{
  4.             uri: imageUrl 
  5.           }}
  6.         /&gt;}
  8. {imageURl==null &amp;&amp; &lt;Image
  9.           style={styles.postImage}
  10.           source={{
  11.             uri: &#39;../assets/images/placeholder2.png&#39;
  12.           }}
  13.         /&gt;}

答案3

得分: 1

<Image
style={styles.postImage}
source={{uri: your_image_url !== null ?
your_image_url : '../xxx/your_local_image'}}
}}
/>

英文:

Try this

  1. &lt;Image
  2.   style={styles.postImage}
  3.   source={{uri: your_image_url !== null ? 
  4.     your_image_url : &#39;../xxx/your_local_image&#39;}}
  5.   }}
  6. /&gt;

答案4

得分: 1

  1. <Image
  2.     source={item.image ? { uri: item.image } : Images.no_image}
  3.     style={{ height: '100%', width: '100%', borderRadius: 20 }}
  4. />
英文: 
  1. &lt;Image
  2.     source={item.image ? { uri: item.image } : Images.no_image}
  3.     style={{ height: &#39;100%&#39;, width: &#39;100%&#39;, borderRadius: 20, }}
  4. /&gt;

huangapple
  • 本文由 发表于 2020年1月3日 15:55:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/59575004.html
  • placeholder
  • react-native
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定