0

I am trying to get the image from the following url : https://mangatown.secure.footprint.net/store/manga/8921/cover.jpg?token=83a7fa7598faf5b7aae40e3c935e0cd95a019adc&ttl=1521921600&v=1521696105

But I only get an empty result,

I tried to use the technique to fetch the url in order to change it into base64 and inject the base64 as an image but couldn't make the fetch worked. 

fetch("https://mangatown.secure.footprint.net/store/manga/8921/cover.jpg", {
  method: 'GET',
  headers: {
    'token': '83a7fa7598faf5b7aae40e3c935e0cd95a019adc',
    'ttl':'1521921600',
    'v':"1521696105"
  }
}
).then((res) => res.text())
.then((content) => {
    this.setState({
      base64: content
    })
})
.catch(err => console.log(err))

But only get this error : 

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.js:441)
at XMLHttpRequest.dispatchEvent (event-target.js:172)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:554)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:387)
at XMLHttpRequest.js:493
at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
at MessageQueue.__callFunction (MessageQueue.js:353)
at MessageQueue.js:118
at MessageQueue.__guardSafe (MessageQueue.js:316)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:117)

(like described here : React Native Image with 'Bearer' authentication token )

Does anyone knows the way to make it works with this kind of Authentication image ?

My code is simple :

<Image style={{width:300, height:300}} resizeMode="contain" source={{ uri: https://mangatown.secure.footprint.net/store/manga/8921/cover.jpg?token=83a7fa7598faf5b7aae40e3c935e0cd95a019adc&ttl=1521921600&v=1521696105 }} />

And a same code without token works perfectly :

 <Image style={{width:300, height:300}} resizeMode="contain" source={{ uri: "https://demo.phpgang.com/crop-images/demo_files/pool.jpg" }} />

Thanks a lot

Clad Clad
  • 2,653
  • 1
  • 20
  • 32
  • Your `fetch` code is defining headers but your `Image` example is using query parameters. Which is it? Those aren't the same thing. – Michael Cheng Mar 23 '18 at 21:37
  • Possible duplicate of [Setting query string using Fetch GET request](https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request) – Michael Cheng Mar 23 '18 at 21:40
  • Sadly with this (which is a good idea) is that I get a issue `BlobURL is not supported`: https://github.com/facebook/react-native/issues/16434 – Clad Clad Mar 24 '18 at 08:11

0 Answers0