Компонент Image и оптимизация изображений¶
Компонент Image , импортируемый из next/image , является расширением HTML-тега img , предназначенным для современного веба. Он включает несколько встроенных оптимизаций, позволяющих добиться хороших показателей Core Web Vitals. Эти оптимизации включают в себя следующее:
- улучшение производительности
- обеспечение визуальной стабильности
- ускорение загрузки страницы
- обеспечение гибкости (масштабируемости) изображений
Пример использования локального изображения:
1 2 3 4 5 6 7 8 9 10 11
import Image from 'next/image'; import imgSrc from '../public/some-image.png'; export default function Home() return ( <> h1>Главная страница/h1> Image src=imgSrc> alt="" role="presentation" /> /> ); > Пример использования удаленного изображения:
Обратите внимание на необходимость установки ширины и высоты изображения
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import Image from 'next/image'; export default function Home() return ( <> h1>Главная страница/h1> Image src="/some-image.png" alt="" role="presentation" width=500> height=500> /> /h1> ); > Определение размеров изображения¶
Image ожидает получение ширины и высоты изображения:
- в случае статического импорта (локальное изображение) ширина и высота вычисляются автоматически
- ширина и высота могут указываться с помощью соответствующих пропов
- если размеры изображения неизвестны, можно использовать проп layout со значением fill
Существует 3 способа решения проблемы неизвестных размеров изображения:
- использование режима макетирования fill : этот режим позволяет управлять размерами изображения с помощью родительского элемента. В этом случае размеры родительского элемента определяются с помощью CSS, а размеры изображения с помощью свойств object-fit и object-position :
- нормализация изображений: если источник изображений находится под нашим контролем, мы можем добавить изменение размеров изображения при его возвращении в ответ на запрос
- модификация вызовов к API: в ответ на запрос может включаться не только само изображение, но и его размеры
Правила стилизации изображений:
- выбирайте правильный режим макетирования
- используйте className — он устанавливается соответствующему элементу img . Обратите внимание: проп style не передается
- при использовании layout=»fill» родительский элемент должен иметь position: relative
- при использовании layout=»responsive» родительский элемент должен иметь display: block
Передача картинок в компонент через пропсы в React.js
Я только-только начинаю изучать React.js и его подходы как таковые, поэтому если кто-то посчитает вопрос глупым и прочее — не судите строго. Я верстаю сайт, где на главной странице у меня отображается перечень услуг — компонент
const ServiceItem = (props) => < return ( // Желаемая картинка, которая чхать хотела на пропсы 
> // Описание услуги, которое замечательно подтягивается пропсами ); > Сам компонент я в дальнейшем импортирую в ServiceList компонент, где по задумке с помощью массива объектов будет отображаться столько компонентов ServiceItem , сколько мне нужно, используя пропсы, которые мне нужны. Вот так выглядит компонент
import React, < useState >from 'react'; import ServicesItem from './ServiceItem'; const ServicesList = () => < const [services] = useState ([ , , , и так далее. ]) return ( key= /> )> ); > 
Так вот, с заголовками услуг ( props.service.title ) проблем нет, всё динамически подтягивается как надо, а вот с картинками иллюстрациями ( props.service.img ) я намучался уже. Картинки мои хранятся в файле проекта, в пути ../../../src/img/santech/. и компонент их видеть не видит Я почитал пару статей и пару похожих вопросов на форумах и понял, что вроде как, то что я хочу сделать вообще не реализуемо. Что если заголовок строкой может передаться через пропсы, то url до картинки то же текстом через пропсы передаться не может. Я пробовал и через инлайновый стиль BackgroundImage , и пробовал пути менять на абсолютные ( http://localhost/. ). Вероятнее всего, я просто делаю «по-джуниорски» и то, что я хочу передать url картинки через хук useState() — делать не стоит. Опытные разработчики, подскажите новичку в реакте, реализуема ли передача урла картинки через данных хук? Задумка такая, что я в одном месте, в том самом массиве объектов, при желании мог бы поменять заголовок любой услуги на другой, и любую картинку услуги на другую. По этому, желательно, не отходить далеко от идеи импортов пропсов через массив объектов. Заранее спасибо!
Куда поместить картинки в приложении реакт и как к ним достучаться?
Положил в папку public, где лежат index.html и favicon.ico, но как мне теперь достучаться до этой картинки из компонента через тег src?
- Вопрос задан более трёх лет назад
- 8512 просмотров
Комментировать
Решения вопроса 1
Если собираете на Webpack, и картинка в src/img/image.svg
А выходная папка dist/
webpack.config в modules
< test: /\.(png|svg|jpg|gif)$/, use: [< loader: 'file-loader', options: < name: f =>< let dirNameInsideAssets = path.relative(path.join(__dirname, 'src'), path.dirname(f)); return `$/[name].[ext]`; > > >], >,index.js
import «./img/image.svg»;
В верстке
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
AmirAsanov @AmirAsanov
с svg также работает?
Ответы на вопрос 1
Кладите картинки либо в src и импортируйте их через import.
Либо в паблик и обращайтесь напрямую, но без public. То есть, если картинка лежит в /public/images/cat.jpg, то обращаться к ней нужно через /images/cat.jpg
Как импортировать SVG(png|jpg|gif) файл в React JS
Недавно столкнулся с проблемой вставки простой картинки формата jpg, в рендер компонента React, и по началу я использовал конверторы типа https://onlinejpgtools.com/ для преобразования jpg картинки в кодировку base64, а полученный код использовал в проекте.
.searchForm input.loading < background: #ffffff url('data:image/gif;base64,R0lGODlhFAAUAOMAAERSXJyirHR6hMzS5KyyvFxibISOlKy2xP///wAAAAAA/. ;>
Довольно таки топорный метод, учитывая что длина строки на странице кода может достигать нескольких десятков километров.. Тем не менее он рабочий, и удобен для небольших картинок или иконок
Перейдем к методу который без лишних движений позволит импортировать любую картинку или формат SVG в компонент React’a
Для этого понадобится загрузчик файлов, который решит проблему относительных путей для изображений, я использовал react-url-loader, он так же конвертирует изображения base64, но уже только в DOM на странице пользователя.
npm i --save-dev url-loader
Добавим код в webpack.config.js :
rules: [ < test: /\.(png|jpg|gif|svg)$/i, use: [ < loader: 'url-loader', options: < limit: 10000, >, >, ], >, ];
Далее импортируем наш файл в компонент к примеру svg файл
import swap from 'css/icons/form-swap-icon.svg'
Выводим в нужном месте в рендере
alt="" />
Вывод в DOM структуре на web странице будет выглядеть так
Кроме того, есть еще пара других погрузчиков и способов, которые делают более или менее то же самое. Но, надеюсь, это было полезно в любом случае.