Setting image in React using inline styles

I’ve been trying to add a banner image using the inline styling method and also using external CSS, but I keep getting this error :

img err
when using the inline styling method.
Here’s my code

import React from 'react'
import Lottery from './assets/lottery.jpg'


function LandingPage() {
    return (

  <div class="hero-image" styles={{ backgroundImage:`url(${Lottery})` }}>
         <div class="hero-text">
            <h1 >Welcome To Scratch9ja</h1>
           <p> Where ha  </p>
        <button>Buy ticket</button>
    </div>
 </div>

    )
}

export default LandingPage

guys, you got this, please suggest a solution.
Thank you in advance

One thing I did notice is that you use the attribute “styles” instead of “style” in your div tag. I don’t know if fixing that would make a difference or not.

1 Like

Are you able to open lottery.jpg? Did you check if the path to the image is correct?

1 Like

Hello there,

Another thing to add: Remember that in JSX, a CSS class is not called class

2 Likes

Thank you for your feedback,
I changed it now and still got the same result

Yes, i’ve changed it and i get the same result, Thank you @Sky020

Yes @singhshemona, the file path is very correct

I’ve also tried this:

 <div class="hero-image" style={{ backgroundImage: `url("../assets/lottery.jpg")`, width:'100%', height:'100%'}}>
         <div class="hero-text">
            <h1 >Welcome To Scratch9ja</h1>
           <p> Where ha  </p>
        <button>Buy ticket</button>
    </div>
 </div>

same result

What i’m trying to achieve here is a full page banner with a logo at the top left and some text in the middle

Does the picture show the full error? I’m see a schema-utils error only

1 Like

I tried recreating it from a React template in Codesandbox.io, but I wasn’t able to reproduce the error. There may be a missing dependency in your package.json file. Is there a way that you could create your error in a codesandbox?

This is mine for reference: https://codesandbox.io/s/solitary-fog-ig2yf

EDIT: It is very basic, but it should have the same principles that you are trying to use.

1 Like

Here’s what i’ve tried again

the js file


the css file

You can see the image at the side

here’s the error

landingPage4

yes, that’s the only error it displays

Wow! Thank you. i just tried the same on codepen and it works. I think the fault is from my own end

1 Like