score:-1
i have found the answer. here it is:
score:0
var myheaders = new headers();
myheaders.append("response", "image/jpeg");
myheaders.append("psid", "");
myheaders.append("x-api-key", "z7dwtzhqrklch7bvswqhnrdtpzilblys");
myheaders.append(
"authorization",
"bearer token"
);
var raw = "";
var requestoptions = {
method: "get",
headers: myheaders,
//body: raw,
redirect: "follow",
};
let response = await fetch(
"yoururl",
requestoptions
)
.then((response) => response)
.then((result) => result)
.catch((error) => console.log("error", error));
res = await response.blob();
then in image tag in your html or jsx file you can do it as follows:
<img src={window.webkiturl.createobjecturl(res)} />
score:5
this is my tried and tested method for fetching data:
componentdidmount(){
fetch('https://www.yoursite.com/api/etc', {
method: 'get',
headers: {
'accept': 'application/json',
'content-type': 'application/json',
},
})
.then((response) => {
return response.text();
})
.then((data) => {
console.log( json.parse(data) )
this.setstate{( pic: json.parse(data) )}
})
}
then within your img
src={ this.state.pic }
score:7
i was able to render images from a backend call in react using a pattern similar to this using: react hooks
, axios
, and url.createobjecturl
i used the url.createobjecturl(blob)
method and used the axios configuration { responsetype: 'blob' }
to make sure the the data type would fit.
const imagecomponent = (imageids) => {
const [images, setimages] = react.usestate([])
react.useeffect(() => {
async function getimage (id) {
let imageblob
try {
imageblob = (await axiosclient.get(`/api/image/${id}`, { responsetype: 'blob' })).data
} catch (err) {
return null
}
return url.createobjecturl(imageblob)
}
async function getimages () {
const imagearray = []
for (const id of imageids) {
imagearray.push(await getimage(id))
}
setimages(imagearray)
}
getimages()
}, [imageids])
return images.map((img, i) => {
return <img src={img} alt={`image-${i}`} key={i} />
})
}
[edit]: if your api is a protected route just make sure your axios http client is initialized with the token already
Source: stackoverflow.com
Related Query
- How to GET image in reactjs from api?
- How can I create a button which Fetches image from API and download to the local with using ReactJs
- How to get a variable from Frontend to the Backend using get API in reactjs with Express API
- How to get data as JSON from this API and display in in my Reactjs app
- How can i get all image urls from my nasa api and add them into an image slider
- How i get response data from api url usinf fetch in reactjs
- How to get pasted value from Reactjs onPaste event
- How to display a image selected from input type = file in reactJS
- How can I get the URL address from the browser in ReactJS (servers URL)
- How to get byte array from a file in reactJS
- How can I get the image url from IPFS info in React.js?
- How to get the DOM node from a Class Component ref with the React.createRef() API
- How to call internal API from Rails view (for ReactJS prerender purpose)?
- How to get User information from JWT cookie in NextJS / ReactJS
- Reactjs and redux - How to prevent excessive api calls from a live-search component?
- How to get html code from reactjs component
- How to find display error message from API in reactjs
- How to send POST request to Django API from ReactJS web app?
- How to get image height and width from uri on React Native?
- How to implement remember me functionality for authentication in ReactJS when i only receive jwt token from backend api
- How to pass data from one component to another while using API in reactjs
- Rails API ActiveStorage: Get Public URL to display image from AWS S3 Bucket?
- How can i get array of object from this data for state and count in reactjs
- How to get image from public folder without using Webpack
- How to populate select dropdown elements with data from API - ReactJS
- How to get Image Url from local Json file in React.js
- React: How do you lazyload image from API response?
- How to get date from Date Picker and show in the table? Material-UI. ReactJS
- in reflux, how can i get data from asp.net web api
- How to Read image data from API and render in React Component
More Query from same tag
- Using draft js with html in and html out
- get nested element from OnClicks target react
- Where to place an if statement in a component?
- Element implicitly has an 'any'. typescript error
- How to make queries in Jest test within context of particular element?
- Updating Parent component state from multiple child components not taking updated state value into account
- How to render react components in a for loop?
- Not redirecting to desired page
- How to change Yup's date format validation
- Custom Theme not applying to components
- How to get an element height in react js with out using any pulgin
- React state not updating using immutability helper update function
- Jest Unit testing onClick event
- Why do I see stale data even after invalidating my queries?
- A map within a map from an array, within an array
- How do I use React refs in a map for functional components?
- Unterminated string literal.ts(1002)
- × TypeError: Cannot read property 'map' of null
- Why functions are written without braces in ReactJS?
- Detect click of a div inside a container
- How can I make my input field prefilled with data and editable on page load?
- React rendering issue with material-ui library
- How to remove Prettier errors from blocking page render
- .env variable returns undefined in React JS app
- TypeError: statevalue is undefined
- 'Undefined' when attempting to pass MaterialUI theme props to styled components
- How to show the only part of the image
- Can micro services be applied to the front-end with JS?
- How h1 tag take attributes to make it responsive - ReactJS
- Return a function with arbitrary properties in typescript