score:2
try to use css instead of js to show different images based on the screen width.
<header class="header">
<img src="./images/small.png" classname="small-screen-logo" alt="logo"/>
<img src="./images/regular.png" classname="large-screen-logo" alt="logo"/>
</header>
display a small screen logo, if the screen size is more than 768px display the bigger screen logo
.small-screen-logo {
display: block;
}
.large-screen-logo {
display: none;
}
@media (min-width: 768px) {
.small-screen-logo {
display: none;
}
.large-screen-logo {
display: block;
}
}
if you use bootstrap you can achieve it with bootstrap classes:
<header class="header">
<img src="./images/small.png" classname="d-block d-md-none" alt="logo"/>
<img src="./images/regular.png" classname="d-none d-md-block" alt="logo"/>
</header>
suggested reading https://developer.mozilla.org/en-us/docs/learn/css/css_layout/media_queries
in case you want to use js you can add a method logo
instead of changelogo(logo)
.
logo() {
return './images/' + (this.state.winwidth < 768 ? 'small.png' : 'regular.png') + '.png';
}
then use it in render as following:
<img src={logo} alt="logo"/>
score:2
use srcset in image tag to specify different src for different screen size:
<img srcset="https://placekitten.com/768/768 768w,
https://placekitten.com/1366/1366 1366w"
sizes="(max-width: 768px) 768px,
1366px"
src="https://placekitten.com/1366/1366" alt="placeholder kitten">
use srcset
to declare multiple sources of image, sizes
to define which src is to be used in which condition.
link to mdn docs for further reading.
Source: stackoverflow.com
Related Query
- React DOM change component on window resize
- react component - change child content on resize of the react element (when width gets to narrow) - not the window size via fixed breakpoints
- Change value in react js on window resize
- Have React component trigger a change event the way DOM components would
- React Router dom change history without changing the component
- react router dom is not updating class component when url change
- Change a react component dom parent without unmounting/resetting it
- how to make a react component state change on window resize?
- React - Rerender a class component after the window pathname change
- In React app , I delete my component data on firebase but it does'n delete from my dom even when I change the state
- React Child Component Not Updating After Parent State Change
- React js change child component's state from parent component
- React - getting a component from a DOM element for debugging
- React component not re-rendering on state change
- React testing library on change for Material UI Select component
- Figuring out how to mock the window size changing for a react component test
- React doesn't reload component data on route param change or query change
- React - get React component from a child DOM element?
- Click event not firing when React Component in a Shadow DOM
- Window Resize - React + Redux
- Open a component in new window on a click in react
- React shouldComponentUpdate() is called even when props or state for that component did not change
- How to get params in component in react router dom v4?
- Return DOM element in render function of React component
- Change react hook state from parent component
- Can a React component manipulate an existing DOM node?
- React Mobx - component not updating after store change
- How to get a React Component reference to change its class using classList?
- Conditionally change order of rendering React component
- React testing component prop change with enzyme
More Query from same tag
- How to inject logic from a function into a script element dynamically
- React - How to change child state based on click event to parent
- When routing , component is not rendering in Side page
- Getting data from TableRow component in Material UI
- Jest encountered an unexpected token and doesn't recongnise ES6 and JSX
- How to validate a password with yup when minimum amount of conditions met
- Sort Data on react-firebase-hooks/database
- React Query Firestore Data
- React native share image
- React Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
- Redux-Loop dispatch not returning promise from reducer
- How to update 1 item in state with redux?
- tinymce-react - how to hide dotted line in read-only mode
- Trouble getting react-suite to work within Gatsby project
- Is there a way to require a field based on another field using a Yup schema?
- JS & ES6: Access static fields from within class
- How to get a specific child in a React component?
- How to redirect to another component on a button click?
- React - Child Components as Behaviors?
- How to search in the table between two age
- Set state after observe()
- Make calls to server without specifying full URL everytime
- React component is not reading my css file
- How to download single file with multiple chunks in javascript using fetch API
- React-router does not render anything if routes are changed in render()
- React: Dynamically generated <select> elements - setting 'selected' state in a mapped element
- React Redux middleware's #store.dispatch(action) vs #next(action)
- how to correctly setState in the reactjs function
- Pass order of an element as a property
- How to recognize env variables in typescript when using vite?