Setting image in React using inline styles

JavaScript
1

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

2

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
3

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

1 Like
4

Hello there,

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

2 Likes
5

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

6

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

7

Yes @singhshemona, the file path is very correct

8

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

9

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

10

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

1 Like
11

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
12

Here’s what i’ve tried again

the js file

landingPage3
landingPage31069×493 31.1 KB

the css file

landingPage1
landingPage11014×495 33.5 KB

You can see the image at the side

here’s the error

landingPage4

13

yes, that’s the only error it displays

14

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

1 Like