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