How To Access Background Image React

Using React Inline Styles to Set the Groundwork Image

Created: October-26, 2021 | Updated: January-24, 2022

Using Inline Styles to Gear up the Groundwork Epitome in React
Using Inline Styles to Set the Local Epitome as the Background in React

When building complex spider web applications, developers oft need to set up a custom groundwork image. The standard approach is to use CSS and HTML.

When developing React applications, y'all have many options for setting a background image. You can utilise regular CSS files or use CSS-in-JS solutions like inline styles in React.

Using Inline Styles to Gear up the Groundwork Image in React

Inline styles allow you to configure HTML or React components' styles within JavaScript files. Here'south an example of setting a background image in React class component:

              class App extends Component {   render() {     const containerStyle = {       backgroundImage:         "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/true cat-6593947_960_720.jpg)",       width: "600px",       superlative: "600px",     };     return <div fashion={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;   } }

HTML vs JSX

Like HTML, in JSX, we use the container'south fashion attribute to define inline styles. However, dissimilar HTML, nosotros can't prepare its value to a simple text. Instead, we utilise curly braces to laissez passer a JavaScript variable, containerStyle. This variable is substantially an object that contains key-value pairs of CSS properties and their respective values.

One important difference is that the keys for a manner object must not incorporate spaces or other not-alphanumeric symbols. In regular CSS, the belongings would be defined every bit background-epitome, but it becomes backgroundImage property of a style object in JavaScript.

One more than reward of using CSS-in-JS solutions is that your style definitions can include variable references. This is achieved through the use of template literals. Here's an example:

              class App extends Component {   render() {     const backgroundImageURL =       "https://cdn.pixabay.com/photo/2021/09/02/16/48/true cat-6593947_960_720.jpg";     const containerStyle = {       backgroundImage:         `url(${backgroundImageURL})`,       width: "600px",       height: "600px",     };     return <div mode={containerStyle}><h1 way={{color: "black"}}>Hullo! Try edit me</h1></div>;   } }

In this case, the styles will reflect the changes to the variable.

Using Inline Styles to Ready the Local Epitome as the Background in React

If yous'd like to use an prototype from the local assets folder, you can employ an import statement or require() method to load information technology. Yet, loading images will only work if your development environment includes webpack.

Whichever manner you choose to load your image into the app, you'll have to specify the relative path:

              import paradigm from "./assets/filename.jpg"

This relative path assumes that both the component and nugget binder are located in the src folder.

Once you lot've imported an image, you can reference it by the proper name of the import (in this instance, image) just like you'd reference a variable. Every paradigm you use in your app must be imported separately, but your background image volition simply take to be imported once.

You tin also create a separate variable and use information technology to store prototype value loaded with crave() method:

              const prototype = crave("./avails/filename.jpg")

Loading images and giving them a variable name is more readable and gives you the liberty to make changes whenever necessary.

Write for us

DelftStack articles are written by software geeks like you. If you too would like to contribute to DelftStack by writing paid articles, yous can bank check the write for u.s.a. page.