معرفی
هنگام توسعه برنامه‌های وب با React، معمولاً می‌خواهیم عناصر بصری را برای جلب توجه کاربران اضافه کنیم. این عناصر بصری می تواند هر نوع تصویری باشد، از جمله JPG، PNG، SVG، GIF و بسیاری دیگر.
در این مقاله، نحوه وارد کردن تصاویر با React را یاد می‌گیریم و راه‌های مختلفی را برای دستیابی به آن مشاهده می‌کنیم.
تصاویر خارجی و تصاویر محلی دو نوع تصویری هستند که می خواهیم در برنامه React خود استفاده کنیم. ما در این مقاله در درجه اول با تصاویر محلی سروکار داریم زیرا تصاویر خارجی نیازی به وارد کردن آنها ندارند.
تصاویر خارجی تصاویری هستند که قبلاً به صورت خارجی میزبانی شده اند و هر کسی می تواند از طریق URL به آنها دسترسی داشته باشد، در حالی که تصاویر محلی تصاویری هستند که فقط در رایانه محلی یا پوشه پروژه در دسترس ما هستند و می خواهیم در برنامه خود استفاده کنیم.
نحوه نمایش تصاویر میزبانی شده خارجی
قبل از اینکه به نحوه وارد کردن تصاویر بپردازیم، مهم است که بدانیم تصاویری که در جای دیگر میزبانی می شوند به همان روشی کار می کنند که همیشه از تصاویر در HTML استفاده می کردیم - با افزودن URL به src ویژگی از img برچسب:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
بیایید اکنون یاد بگیریم که چگونه می توانیم تصاویر (محلی) را با React وارد کنیم!
نحوه وارد کردن تصاویر با React
جدا از تصاویر خارجی، نحوه استفاده از تصاویر در React به طور قابل توجهی با سایر فریمورک ها یا حتی HTML متفاوت است. این تصاویر قبل از استفاده در برنامه ما باید ابتدا به React وارد شوند.
این را می توان به دو طریق انجام داد: با استفاده از import بیانیه یا با استفاده از require() عملکرد. ما هر دو رویکرد را مرور خواهیم کرد.
نحوه وارد کردن تصاویر با React با استفاده از واردات بیانیه
از آنجا که خواندن و درک آن آسان تر است import بیانیه رایج ترین روش استفاده شده برای وارد کردن تصاویر ذخیره شده محلی در React است. تصاویر به عنوان صادرات پیش فرض، و وقتی آنها را وارد می کنیم، این کار را به همان روشی که اجزا را وارد می کنیم، انجام می دهیم. این کار با تعیین مسیر نسبی از فایل به تصویری که وارد می کنیم انجام می شود:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
در کد بالا، ما همچنان از img برچسب و src ویژگی، اما این بار src ویژگی به جای رشته ای یک متغیر را دریافت می کند که با استفاده از پرانتزهای فرفری در JSX ارسال می شود.
توجه داشته باشید: ما می‌توانیم هر تعداد عکس را که می‌خواهیم وارد کنیم، اما هر تصویر باید یک نام منحصر به فرد در دستور import داشته باشد، در غیر این صورت با خطا مواجه می‌شود.
درک چگونگی تعیین و به دست آوردن مسیرهای نسبی برای فایل ها مهم است. در غیر این صورت، اشکالات و خطاها ممکن است رخ دهد. در مثال قبل، تصویر در یک ذخیره شد /src/images.
نحوه وارد کردن تصاویر با React با استفاده از تابع require()
La require() تابع یک تابع Node.js است که برای گنجاندن ماژول های خارجی از فایل های غیر از فایل فعلی استفاده می شود. به همان روش کار می کند import بیانیه و به ما امکان می دهد تصاویر را اضافه کنیم:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
تنها تفاوت در اولین خط است که در آن تصویر را از طریق مسیر نسبی آن مورد نیاز کردیم و سپس آن را در متغیری ذخیره کردیم که در آن به آن دسترسی داشتیم. img از طریق بریس های فرفری برچسب بزنید.
همچنین می‌توانیم تصمیم بگیریم این کار را درون خطی انجام دهیم و از خط اضافی استفاده شده برای اختصاص تصویر به یک متغیر اجتناب کنیم، زیرا اجباری نیست:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
نتیجه
ما یاد گرفتیم که چگونه تصاویر محلی را با استفاده از import بیانیه و require() عملکرد در این مقاله
