为什么某些图片网址无法使用图片代码?

时间:2018-06-16 03:06:51

标签: react-native

我有两个图片网址。

第一个是

https://movies.tw.campaign.yahoo.net/i/o/production/movies/April2018/BkglQJA9PKZSJ7QfyWfM-500x714.jpg

第二个是

http://imgs.cdn.speranze.tw/uploaded%2Fstudio%2Fcinema%2Fdefault%2F1000010%2F1000026%2F1003866%2F12058_n.jpg?w=800&h=534&p=lt

它们都粘贴在网站上都可以显示图像。

但是当我在反应原生<Image />

中使用它们时

第一个是工作,但第二个网址我只是得到一个空图像。

为什么?我无法理解。

我这样用:

<Image 
      source={{ uri: 'http://imgs.cdn.speranze.tw/uploaded%2Fstudio%2Fcinema%2Fdefault%2F1000010%2F1000026%2F1003866%2F12058_n.jpg?w=800&h=534&p=lt' }} 
      style={{ height: 100, width: 300 }} 
    />

任何帮助将不胜感激。提前谢谢。

这是我的类组件代码:

import React, { Component } from 'react';
import { View, Image } from 'react-native';

class TicketInformation extends Component {
  render() {

    return (
      <View style={{ flex: 1 }}>
        <Image 
          source={{ uri: 'https://movies.tw.campaign.yahoo.net/i/o/production/movies/April2018/BkglQJA9PKZSJ7QfyWfM-500x714.jpg' }} 
          style={{ height: 100, width: 300 }} 
        />

        <Image 
          source={{ uri: 'http://imgs.cdn.speranze.tw/uploaded%2Fstudio%2Fcinema%2Fdefault%2F1000010%2F1000026%2F1003866%2F12058_n.jpg?w=800&h=534&p=lt' }} 
          style={{ height: 100, width: 300 }} 
        />

      </View>
    );
  }
}

export default TicketInformation;

我的屏幕显示如下: enter image description here

这是我的package.json:

{
  "name": "MovieToGo",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "^22.4.4",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "16.3.1"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/"
    ]
  },
  "dependencies": {
    "@ptomasroos/react-native-multi-slider": "0.0.14",
    "@shoutem/ui": "^0.23.4",
    "moment-timezone": "^0.5.17",
    "native-base": "^2.4.5",
    "react": "16.3.1",
    "react-native": "~0.55.4",
    "react-native-admob": "^2.0.0-beta.5",
    "react-native-animatable": "^1.2.4",
    "react-native-elements": "^0.19.1",
    "react-native-multi-slider": "^0.3.6",
    "react-native-permissions": "^1.1.1",
    "react-native-radio-buttons": "^1.0.0",
    "react-native-vector-icons": "^4.6.0",
    "react-native-youtube": "^1.1.0",
    "react-navigation": "^2.0.4",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.2.0",
    "teaset": "^0.5.6"
  }
}

0 个答案:

没有答案