score:1
Accepted answer
to trigger image onload
listener it should be mounted to the dom, otherwise your setimagesize
not called. to do this you should have valid images and attach it somewhere to the html, like this:
const urls = {
small: 'https://dummyimage.com/600x400/000/fff',
medium: 'https://dummyimage.com/600x400/000/fff',
large: 'https://dummyimage.com/600x400/000/fff',
}
const getimagesize = () => {
for (const url in urls) {
const img = new image()
img.src = urls[url]
img.onload = () => {
setimagesize(prev => {
return {
...prev,
[url]: {
width: img.width,
height: img.height,
},
}
})
}
document.body.appendchild(img)
}
}
useeffect(() => {
getimagesize()
}, [])
score:0
try this below code:
const [imagesize, setimagesize] = usestate({});
const urls = {
small: https://image1.com,
medium: https://image2.com,
large: https://image3.com,
};
const getimagesize = () => {
for (const size in urls) {
var img = new image();
img.onload = function() {
setimagesize((prev) => {
return {
...prev,
[size]: {width: this.width, height: this.height}
}
})
};
img.src = url;
}
}
useeffect(() => {
getimagesize()
}, [])
score:0
check the fiddle link i hope it will work[https://jsfiddle.net/k7bue0ho/][1]
Source: stackoverflow.com
Related Query
- How can i get multiple select options in react js.?
- How I can define image in React component if path to image I get from JSON file
- How can I get multiple string parameters in React Router
- React: how can I get multiple image size?
- How can we get the input text from multiple dynamic textareas in react hook?
- React - How can I get the values from my multiple input and send them to my input?
- How can I get the 1st image from each album with an even ID in React using Fetch?
- How can I get all the values from multiple select inputs on a button click? React
- How to get a react component's size (height/width) before render?
- How can I get input radio elements to horizontally align in react [material-ui]?
- How can I add multiple className's to react component?
- How can I repeat a pattern image to create a background in React Native?
- How can I get the device's ip on React Native?
- How to get multiple static contexts in new CONTEXT API in React v16.6
- How can I get an input's value on a button click in a Stateless React Component?
- How can I get a variable from the path in react router?
- How to create a privately shared component library which can be used across multiple react projects
- How can I get data from a local file into my React app?
- react - how do I get the size of a component child elements and reposition them
- How can I get the image url from IPFS info in React.js?
- How can I get webpack-dev-server to stop downloading incorrect chunks on content change with React lazy/Suspense code splitting?
- How can I get TypeScript to type-check the spread operator in React props?
- How to get size of an element in an react app that is totally based on functional components?
- How can I use an axios get call inside a Context provider in react
- How can I split React Router into multiple files
- How can I get innerHTML when clicking a button in React js?
- How can I set the source of an image dynamically in React native?
- How to get image height and width from uri on React Native?
- How can I get the value from an animated or interpolated value in React Native?
- How can I get a width of html element in React JS?
More Query from same tag
- react router not working on some pages on live site
- Add class to siblings when Component clicked in React
- OAuth popup cross-domain security React.js
- CombineReducers with Typescript returns error "Argument of type is not assignable to parameter of type 'ReducersMapObject'"
- Get location path from use Location hook inside a column renderer from react-bootstrap-table2
- why is react select default value not working
- Error while installing node module in ReactJs
- Uncaught (in promise) SyntaxError: Unexpected token r in JSON at position 0
- Pass CSS variable as prop to the react component
- How to filter off a blank array? React/Javascript/Es6
- Reactjs map over redux store
- How can I make auto-scroll to div, when div is visible in React?
- How to place path variable in Get request in React?
- reactjs - Function not working inside a map function
- I have a MaterialUi Table wrapped within a Paper component. How can I add a minimize button to minimize my table or the Paper component?
- Passing local image file path via object value to React prop not working?
- Jest test function call inside useEffect
- How to test if a component is rendered or not by jest and enzyme?
- How ReactJS display fetch response onClick
- Apanding external HTML to a react component is not working
- Trivial issue with React setState function
- require is not defined
- How to change a svg image along with text with hover in CSS
- Handling state and arrays of objects in React
- retrieve data from asyncStorage in react native
- useFormik React - Update initialValues
- React Material UI Card Content expand
- How to get the ref from a Mobiscroll child component into the parent
- Form Semantic UI React
- Uncaught Invariant Violation: Minified React error