Такие фреймворки, как React, были созданы, чтобы упростить веб-дизайн и разработку, однако недостатком фреймворков является то, что вещи не идут естественным путем так, как им хотелось бы создавать с нуля. Одна из проблем, с которыми я столкнулся при установке React, - это работа с изображениями на моем ПК, и довольно удивительно, что я не смог найти решение в Интернете (даже stackoverflow), поэтому мне пришлось разобраться во всем самостоятельно. В этой короткой статье я расскажу вам, как вы можете работать с локальными изображениями в React (я предполагаю, что вы уже знаете основы реакции, поэтому я пропущу некоторые вещи, чтобы сэкономить время :))
- Создайте новое приложение для реагирования или используйте существующее
npx create-react-app working-with-images
2. Перейдите в папку с изображениями на вашем компьютере и скопируйте их.
3. Перейдите к своему приложению для реагирования, которое вы создали на шаге 1, и откройте общую папку.
4. Создайте новую папку, скажем изображения.
5. Вставьте изображения в эту новую папку.
5. Откройте App.js в желаемом текстовом редакторе или IDE и очистите содержимое заголовка.
6. Создайте тег img в атрибуте src, введите изображения каталога в фигурных скобках, а затем косая черта и название изображения, как показано ниже.
<img src={'images/1.jpg'} alt="A text describing the image" width="500px" />
7. Запустите сервер (запуск npm), ваше изображение будет отображаться правильно, как показано ниже.
npm start
ОЧЕНЬ ВАЖНО: ваше изображение должно находиться в общей папке.
Спасибо за чтение, вы можете проявить немного любви, отдав 1,10 или 100 хлопков в ладоши.
