رفع مشکل لود نشدن تصویر در 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>

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