Use desktop images to set the background for mobile views in a React JSX environment

My custom Gutenberg block is built using React JSX, allowing users to input two hero images - one for Desktop and one for Mobile. Currently, if a user does not upload a mobile image, it displays a blank space. I am looking for a way to have the desktop image render when no mobile image is provided. I have included the code reference below, can anyone assist me in implementing this in React JSX?

Below is my save method:

                  <img className="header-img header-img-d" src={ imgURL } />
                  <img className="header-img header-img-m" src={ mobileImgURL }/>
cssreactjsjsxwordpress-gutenberggutenberg-blocks

Answer №1

Simply make adjustments to the display of the mobile image.

<img className="mobile-header-img" src={ mobileImgURL ? mobileImgURL : imgURL  }/>

This code will display imgURL in case mobileImgURL is not available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using HTML5 to Define the Size of a File Upload Button

The validation error from W3C states: "Attribute size is not permitted for the input element at this location." <input type="file" name="foo" size="40" /> How should the width of a file input be specified in HTML5? ...

csshtml

Creating a Star Rating System Using HTML and CSS

Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistanc ...

javascripthtmlcsssalesforcevisualforce

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

javascriptcssreactjsmaterial-ui

Using React Context to trigger a state change when a button is clicked

As I navigate my way through the React ecosystem as a newcomer, I find myself using a React Context to handle state management in my Next.js App. The challenge lies within my Context file: import { useState, createContext, useContext } from "react&quo ...

reactjsnext.js

What is the most efficient method for retrieving data upon form submission in Next.js?

When using the provided code and Metadata-scraper to retrieve meta data from a URL, I can do so successfully when it's hardcoded. However, I'm looking for guidance on how to allow users to input a link via a text field and fetch the meta data upo ...

javascriptreactjsnext.js

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

phphtmlcsswordpress

Is it possible to retrieve the child state value in the parent component using useRef in ReactJS with TypeScript (hooks)?

I am currently learning Typescript and I am trying to figure out how to pass child state values to the parent component using a ref when a button is clicked in order to update the reducer values. However, I keep running into errors when I try to pass a ref ...

reactjstypescriptreact-hooks

What are the benefits of passing callbacks in a React component's props instead of relying on react-redux's connect method?

What is the reason behind callbacks (or redux's dispatch) being commonly passed in a component's props rather than always utilizing the react-redux connect function? Using dispatch (or a function wrapped in dispatch) as a prop: // example.js, i ...

reactjsredux

In an effort to bring some flair to my React Hangman App, I am working on animating a collection

Challenge In my Hangman App, I am attempting to implement letter animations using react-spring. I want the letters from an array to fade in when loaded and fade out when removed by clicking on them. However, my previous attempts have resulted in laggy per ...

javascriptarraysreactjsanimationreact-spring

Tips for Aligning Images of Various Sizes in the Center of a div

My images are displayed in a horizontal line, but some have different sizes. I want to center all the images within their container div for a better look. Is there a way to do this automatically with CSS so that the images remain centered regardless of siz ...

htmlcss

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid

Exploring jQuery: Techniques for Hovering, Changing, and Toggling Images

Currently, I am busy working on my project and I am attempting to achieve this by... I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect an ...

javascriptjqueryhtmlcss

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

Forwarding refs in React FC allows you to easily pass down

I have encountered an issue with references - I am trying to reference a function component and pass props to it. Currently, I have my Parent component and Child Component set up. In the parent component, I need to use a ref to access my child component. S ...

javascriptreactjstypescript

Is it possible for you to simulate the shift key being pressed prior to the event execution?

Is there a way to allow the user to scroll left and right horizontally without having to hold the shift key down? I want to achieve this effect by setting the "shiftKey" variable to true even when it is not physically pressed. Any suggestions on how to ...

javascripthtmlreactjs

Using setState in an external function: A step-by-step guide

import Request from 'superagent'; const fetchApi = () => { let apiUrl = '/* URL */'; return Request.get(apiUrl).then((response) => { this.setState({ data: response.body }); }); } export d ...

javascriptreactjs

The Integration of Module Federation with React's Context API

How can I easily share a React Context API object from the host to its child modules? I've found examples online using node modules for this purpose, but is there a simpler way to achieve this? ...

reactjsreact-contextwebpack-module-federation

The component's div does not respond to the max-width attribute

I'm currently facing an issue with my chart component in a view. I've been trying to reduce its size using max-width property but it doesn't seem to be working. Below are the relevant code snippets: <div id="chart"> < ...

htmlcssvue.js

The state of the component remains unchanged even after triggering an action dispatch

I'm facing an issue with my component where I use the useEffect hook to fetch data from local storage on startup. After successfully dispatching an action and updating the state in the reducer, I am not seeing any change reflected in the component its ...

reactjsreact-nativereduxreact-redux