Компонент изображения Ant Design пользовательского интерфейса ReactJS

Опубликовано: 8 Августа, 2022

В Ant Design Library этот компонент уже собран, и его также очень легко интегрировать . Компонент изображения используется для того, чтобы предоставить возможность размещать изображения в нашем приложении , которые доступны для предварительного просмотра . Мы можем использовать следующий подход в ReactJS для использования компонента Ant Design Image.

Реквизит изображения:

  • alt: используется для описания описания изображения.
  • резервный вариант: используется для обозначения отказоустойчивого src, устойчивого к сбою нагрузки.
  • высота: используется для обозначения высоты изображения.
  • заполнитель: используется для обозначения значения заполнителя нагрузки.
  • предварительный просмотр: это конфигурация предварительного просмотра.
  • src: используется для определения пути к изображению.
  • ширина: используется для обозначения ширины изображения.
  • onError: это функция обратного вызова, которая срабатывает при сбое загрузки.

Создание приложения React и установка модуля:

  • Шаг 1: Создайте приложение React с помощью следующей команды:

     npx имя папки create-реагировать-приложение

  • Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

     cd имя папки

  • Шаг 3: После создания приложения ReactJS установите требуется модуль с помощью следующей команды:

     нпм установить и

Структура проекта: Это будет выглядеть следующим образом.

Пример. Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код.

App.js




import React from "react"
import "antd/dist/antd.css";
import { Image } from "antd";
  
export default function App() {
  return (
    <div style={{
      display: "block", width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Image Component</h4>
      <Image
        width={100}
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
      />
    </div>
  );
}

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://ant.design/components/image/

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ