What does this '.src' do here in next js?-CodePudding

Here I'm setting background image in Next js. I've found a solution here to add .src at the end like this

import bgImg from '../public/images/Error/BG.png';

 <Layout style={{ backgroundImage: `url(${bgImg.src})`}}> </Layout>

I don't know what the src in bgImg.src do?. Please explain.

CodePudding user response：

If you console.log(bgImg)

You will find the output syntax to be like:

 bgImg: {
    src: '...',
    height: 1028,
    width: 1013,
    blurDataURL: '...'      
  }

So your are basically accessing image source object value with dot notation.

CodePudding user response：

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return (
    <div style={{backgroundImage: `url()`}}>
      Hello World!
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

after the backgroundImage: when you write inside brackets after url .src defines the source from where the image will be taken