Next.js background-image css property cant load the image

news

I'm trying to get entry to a static image to use inside an inline backgroundImage property within React.

i am working with reactjs and next.js then i faced a subject matter with adding photos with next.js however fixed this by using image loader called : Next.js + Images,

now i may upload pictures most often with standard html img tag

Example: <img src= img /> this works.

but if i tried to add css background pictures as the following:

const staff = (props) =>  const img = require("../../assets/images/security-team.jpg"); const styling =  backgroundImage: `url('$img')`, width:"100%", top:"100%"  console.log(img); go back ( <div className="team" taste=styling> </div> );

here was the console.log effects :

/_next/static/pictures/security-team-449919af8999ae47eaf307dca4dda8e1.jpg

the image does not appear and no mistakes happened then, i tried to kind in the browser website-url + the console.log effects the image appeared !

2

23 Answers

First import the image record

import bg from '../../property/photos/security-team.jpg'

then practice inline style

taste= backgroundImage: `url($bg.src)`, width: '100%', peak: '100%',
7

With [email protected] I had my image in the public folder and then in the taste report I used the following and it labored.

background-image: url('/image.svg');
0

All the solutions here do not allow the major advantages of NextJs custom <Image> element which serves optimized, responsive images via default and has immense benefits. When I can, I use z-index to "fake" a css background image.

However, this system does have the limitation of no longer having repeatable choices like a CSS background would.

Note that this case makes use of Tailwind CSS.

<div className="h-screen"> <div className="absolute -z-10"> <Image src="/some.jpeg" layout="fill" objectFit="cover" high quality=100 /> </div> <div> Some overlay issues cross in right here </div> </div>
4

css file in kinds/home.scss

Image file in public/bg-img.png

.content_bg  margin: 50px 0; background-image: url('../public/bg-img.png'); peak: 500px; background-size: duvet; background-repeat: no-repeat;
3

The bundle next-images works for me.

First :

yarn upload next-images

Then, in a next.config.js record :

const withImages = require('next-images') module.exports = withImages()

Then you'll be able to do :

<div taste= backgroundImage: "url(" + `$require("./path-to-the-image")` + ")", width: "100%", height:[HEIGHT OF THE IMAGE], backgroundRepeat: "no-repeat", backgroundSize: "cover"  >XXX</div>

For more information on next-images : https://github.com/twopluszero/next-images

3

As nextjs documentation says (https://nextjs.org/docs/basic-features/static-file-serving):

Next.js can serve static information, like images, beneath a folder known as public in the root directory.

Files inside public can then be referenced by way of your code ranging from the base URL (/).

So the proper option to reference our photos from the public folder:

CSS instance:

background-image: url('/your-image.jpg');

JSX example:

import Image from 'subsequent/image' <Image src="/your-image.jpg" alt="Image description" width="64" peak="64" />
1

when i used JSX kinds then added place absolute property it worked just tremendous.

Like this:

 <taste JSX>` .crew  width:100%; peak:100%; place:absolute; background: url('`+img+`') no-repeat;  `</style>

You too can attempt to use '/static/images/security-team.jpg' with out import for those who place your image in '/static/photographs/' folder. For instance:

const styling =  backgroundImage: "url('/static/images/security-team.jpg')", width:"100%", height:"100%"  go back ( <div className="team" taste=styling></div> );
1

You can put the image in the public folder, and get right of entry to it like so:

const workforce = (props) => { const styling =  backgroundImage: `url('./security-team.jpg')`, width:"100%", peak:"100%"  go back ( <dev className="team" style=styling> </dev> );
2

all what you must do is to modify url

from background-image: url('/public/images/my-img.jpg');

to background-image: url('/static/photos/my-img.jpg');

I'm using Next.js v12.0.10, and it fails to load css background image after I try something like:

<div style= backgroundImage: "url('/public/a.jpg')"> </div>

but if I forget the /public in the image url, everything works:

<div style= backgroundImage: "url: '/a.jpg')"> </div>

Just like Ivan says above:

Files within public can then be referenced by means of your code starting from the base URL (/).

1

the /static directory used to be deprecated. any individual who tries to use it will most likely get the error message in their console but right here the hyperlink containing NextJS' clarification of why they selected to deprecate the static listing.

Because public also covers the static directory use case we have decided to deprecate the static directory in favor of creating a public/static folder with the same functionality.

for use dynamic image

initially claim taste like this

 let taste =  backgroundImage: "url(" + props.image + ")",

then

<div taste=taste> <div className="content">content here</div> </div>

Next.js can serve static files, like pictures, under a folder referred to as public in the root listing. Files inside of public can then be referenced by your code starting from the base URL (/).

For instance, should you upload an image to public/me.png, the following code will get admission to the image:

background-image: url('/img/imge1.png');

Next.js by means of default supports .scss and related files. Internally, Next.js uses a Webpack loader to load css that can observe url("") values and translate them to the output file identify in the similar method that import bg from '../../property/images/security-team.jpg' will.

So as long as you're uploading your css in some way that Webpack can understand import types from './MyModule.module.scss' or an identical, you'll be able to immediately url('relative/trail').

For example:

.crew  background-image: url('../../property/pictures/security-team.jpg'), width: 100%, peak: 100% /* ... */

And the above does NOT require it to be in the public folder

<div className="VistaCodeLab" style=backgroundImage: ` url('data:image/png;base64,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')`></div>

use like this with base64 image

Online conversion tool for image to base64 https://www.base64-image.de/

image should be in public (example with tailwind)

<div className="my-5 lg:my-6"> <img src="/logotipo/logo.png" alt="easybanklogo" /> </div> 
 <div class="horizontal-layout horizontal-menu navbar-static dark-layout 1-column footer-static bg-full-screen-image blank-page blank-page" data-open="hover" data-menu="horizontal-menu" data-col="1-column" data-layout="dark-layout" style= backgroundImage: "url(/assets/images/pages/auth-bg.jpg)"  >

For me, this kind of url works:

background-image: url("../../public/path/to/image.jpg")

The trick is to make use of two .. sooner than /public (assuming your images are in public folder)

What I realized in next js :

  • you'll be able to get admission to recordsdata in the public folder direcly by means of together with it's trail from the public folder (now not including the public folder or a path to that public folder ) for and inline BackfloorImage => "/image.png"

for and background-image(In a css record) => outline a trail from the record your coding in to that image eg "../public/image.png"

Back to what i was operating on ...

 <segment style= backgroundImage : "url('/4.jpg')" >

in next.js 14 with tailwind

 import imagePath from "public/image.png" // inset-Zero makes it fill the whole space within its parent container. <div className="absolute -z-10 inset-0"> <Image src=imagePath alt="always add alt" fill style=objectFit:'cover' /> product.identify </div>

available props

Example the usage of Nextjs, node modules and scss. import styles from "../styles/Home.modules.scss" import Image from "next/image" export default serve as Home()  <div className=types.background_image> <Image width=2746 //use the width of the image getting used top=4681 //use the height of the image getting used layout="fill" alt="water_portrait" src="/home/water_portrait.jpg" //image saved in public/house /> </div>  //styles/Home.module.scss .background_image  position: absolute; best: 0; left: 0; width: 100vw; top: 100vh; z-index: 1;  .somethingElse positsion: relative; z-index:10;

I managed to get around this by way of the use of the src property of the image object so:

 img.src

Their documentation shows a background image applied via the underneath means even though:

import Image from 'subsequent/image' <Image />

Here's a live demo - https://image-component.nextjs.gallery/background

1

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobGpwZGeBcoWOp5yxrF2fwG6uwJyioKqfqrulecimmKCdXZjAtHnPq6apnaKpxm6vwKerZqSflrFuwMeeZKKlkZyy