rrutsche/react-parallax

Local image is not loading

Closed this issue · 2 comments

zillBoy commented

Describe the bug
Hi, I'm using react-parallax in my Next.Js application and I'm not able to load the background image that is in my assets folder when using react-parallax library. However if I give it a URL path of image from internet its loading but not working for my local images.

Expected behavior
When using my project local image, I want it to show on browser.

Screenshots
Screenshot_35

Desktop/Smartphone (please complete the following information):

  • OS and Device: Windows 10 - HP Probook G740
  • Browser: Chrome
  • Version: 107.0.5304.107 (Official Build) (64-bit)

Code and/or example

// React Dependencies
import React from "react";

// External Dependencies
import { Parallax } from "react-parallax";

export default function Home() {
    return (
        <Parallax bgImage={"../assets/images/desktop-1.jpg"} strength={-200}>
          <div style={{ height: 800 }}>
            <div style={insideStyles}>HTML inside the parallax</div>
          </div>
        </Parallax>   
    )
}
rrutsche commented

I think NextJS has a public folder where you can put your local files. These files can be referenced starting with /my-image.jpg.
https://nextjs.org/docs/basic-features/static-file-serving

zillBoy commented

Hi @rrutsche,
Thank you so much, it's working fine now. 🎉😊

After changing my image location to public folder and giving the path "/desktop-1.jpg" its working fine.

<Parallax bgImage={"/desktop-1.jpg"} strength={-100}>
  <div style={{ height: 600 }}>
    <div style={insideStyles}>Reverse direction</div>
  </div>
</Parallax>

Screenshot_52