در این مطلب آموزش استفاده صحیح از تصاویر در ReactJS و محل قرارگیری آنها رو برررسی می کنیم.
آموزش استفاده از تصاویر در ReactJS
ما به دو شکل می توانیم تصاویرمون رو در ری اکت استفاده کنیم.
روش های استفاده از تصاویر در ReactJS
1. یک پوشه به نام assets در پوشه src ایجاد کنید تصاویرتون رو در اون قرار بدید و بعد در کامپوننت های دلخواه import کنید.
<img src={logo.svg} />
2. راه دوم این هست که تصاویر رو در پوشه public قرار بدید و در کامپوننت مورد نظر دسترسی مستقیم بدید.
<img decoding="async" src="/logo.svg" />
حالا سوال پیش میاد کدام روش رو باید استفاده کنیم؟!
اصلا کدوم روش درست تره؟!
اگر تصاویر ما قرار هست در همه کامپوننت ها استفاده شوند آنها را در پوشه public قرار می دیم و آدرس دهی مستقیم می کنیم(روش دوم) مثل لوگو، اما اگر تصاویر تنها برای استفاده در چند کامپوننت به خصوص هستند از روش اول استفاده می کنیم.
نکته:
ممکنه ما در آموزش های دیگه روش های مختلف دیگری رو برای استفاده از تصاویر در ReactJS ببینیم که در واقع همانند استایل کدینگ هر توسعه دهنده این روش ها متفاوت می باشند اما در این مطلب سعی کردم بهترین و استانداردترین حالت ها رو توضیح بدم.
امیدوارم این مطلب آموزشی برای شما مفید واقع شده باشه. ما بقی مطالب رو می تونید در بلاگ آموزش طراحی وب مشاهده و مطالعه بفرمایید.
—————————–
آموزش ری اکت در w3schools
