رفع مشکل لود نشدن تصویر در react-scroll-parallax

رفع مشکل لود نشدن تصویر در react-scroll-parallax

اگر در حال استفاده از کتابخانه ی react-scroll-parallax هستید ممکن است در حین کار با این کتابخانه به مشکلی عجیب بر بخورید که در تمام دموها و داکیومنت ها تصاویر لود می شوند اما برای شما تصاویر لود نمی شود.

در این نوشته به روش حل این مشکل می پردازیم.

همراه ما باشید.

رفع مشکل لود نشدن تصویر در react-scroll-parallax

احتمالا شما کدی مثل زیر را استفاده می کنید:

import { ParallaxBanner } from "react-scroll-parallax";




<ParallaxBanner
   layers={[{ image: "/image.png", speed: -55 }]}
   style={{ aspectRatio: '2 / 1' }}
/>

برای حل مشکل خود کافیست کد بالا را کمی تغییر دهید و به شکل زیر استفاده کنید:

import { ParallaxProvider } from 'react-scroll-parallax';
import { ParallaxBanner } from "react-scroll-parallax";



<ParallaxProvider>
   <ParallaxBanner
      layers={[{ image: "/image.png", speed: -55 }]}
      style={{ aspectRatio: '2 / 1' }}
   ></ParallaxBanner>
</ParallaxProvider>

اگر مشکل شما حل نشد در بخش نظرات همین نوشته برای ما بنویسید.

موفق باشید.