有些图像未在 react-native-fastimage 中显示

Posted 2023-03-11

【中文标题】有些图像未在 react-native-fastimage 中显示

【英文标题】：Some images are not showing in react-native-fastimage

【发布时间】：2018-12-20 03:02:52

【问题描述】：

我正在使用 react-native 制作 ios 应用。

但我在react-native-fastimage 库中遇到了一些问题。

首先，下面的代码可以正常显示：

<FastImage
   style=s.image
   source=
      uri: 'https://unsplash.it/400/400?image=1',
      priority: FastImage.priority.normal,
   
   resizeMode=FastImage.resizeMode.stretch
/>

但是，这没有显示：

<FastImage
   style=s.image
   source=
      uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
      headers: Authorization: 'someAuthToken' ,
      priority: FastImage.priority.high,
   
   resizeMode=FastImage.resizeMode.stretch
/>

为什么我看不到任何图像？ 我不能从 s3 加载图像吗？

以下是我测试的。

我下载了“https://unsplash.it/400/400?image=1”并上传到 s3，但它也没有显示。

我尝试使用<Image> 组件，它可以工作。问题在于 FastImage 和 S3 Image。

我在标题中添加了“Content-Type”，但它仍然没有显示..

我尝试应用不是 s3 图像的其他图像（大尺寸、png、jpeg 等）。 它们显示正常。

我尝试重新安装 node_module、初始化项目并删除缓存。但是 s3 中的图像仍然没有显示。

我不知道是什么问题。请帮帮我..

PS) package.json

  "name": "ZzimIos",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  ,
  "dependencies": 
    "@expo/vector-icons": "^6.3.1",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.1",
    "react": "16.4.1",
    "react-native": "^0.56.0",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-awesome-alerts": "^1.0.6",
    "react-native-blur": "^3.2.2",
    "react-native-carousel-view": "^0.5.1",
    "react-native-fast-image": "^4.0.2",
    "react-native-gifted-chat": "^0.3.0",
    "react-native-keyboard-aware-scroll-view": "^0.4.4",
    "react-native-masonry": "^0.5.0-alpha.1",
    "react-native-navigation": "^2.0.2397",
    "react-native-scalable-image": "^0.2.2",
    "react-native-splash-screen": "^3.0.6",
    "react-native-status-bar-height": "^2.0.0",
    "react-redux": "^5.0.7",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "styled-components": "^3.2.5"
  ,
  "devDependencies": 
    "babel-eslint": "^8.0.2",
    "babel-jest": "22.4.3",
    "babel-plugin-module-resolver": "^3.0.0",
    "eslint": "^4.11.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.2.1",
    "jest": "22.4.3",
    "react-native-debugger-open": "^0.3.17",
    "react-test-renderer": "16.3.1"
  ,
  "jest": 
    "preset": "react-native"
  

【问题讨论】：

@shim 感谢您的编辑 :)

【参考方案1】：

我也有同样的问题， 你能从 Fastimage 请求中删除 headers 参数吗

那么您的代码将如下所示：

<FastImage
   style=s.image
   source=
      uri: 'https://s3.ap-northeast-2.amazonaws.com/zzim-app-images/intro/180529_1.png',
      priority: FastImage.priority.high,
   
   resizeMode=FastImage.resizeMode.stretch
/>

这对我有用。

【讨论】：

遇到同样的问题，但不幸的是您的解决方案不起作用