Как загрузить внешнюю картинку в react?

Пользователь

от clifford , в категории: JavaScript , 7 месяцев назад

Как загрузить внешнюю картинку в react?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от brooklyn , 7 месяцев назад

@clifford 

В React для загрузки внешней картинки можно использовать тег <img> с указанием атрибута src в качестве ссылки на изображение. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

function App() {
  return (
    <div>
      <img src="https://example.com/image.jpg" alt="example image" />
    </div>
  );
}

export default App;


В этом примере мы используем тег <img> для отображения изображения, указав ссылку на внешнюю картинку в атрибуте src. Также мы добавили атрибут alt, который предоставляет текстовое описание изображения для людей с ограниченными возможностями.


Кроме того, можно загружать картинки с локального сервера. В этом случае необходимо поместить изображение в папку public внутри проекта React и указать путь к файлу в атрибуте src. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

function App() {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/images/example.jpg'} alt="example image" />
    </div>
  );
}

export default App;


Здесь мы используем переменную process.env.PUBLIC_URL для получения базового URL-адреса для файлов в папке public, а затем добавляем путь к файлу изображения.