Загрузка локальных изображений в React.js

Я установил React с помощью приложения create-react-app. Он установлен нормально, но я пытаюсь загрузить изображение в один из моих компонентов (Header.js, путь к файлу: src/components/common/Header.js), но он не загружается. Вот мой код:

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>

        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
            <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
}

Если я напишу путь к изображению как src={require('./src/images/logo.png')} в моей переменной logo1, это выдаст ошибку:

Не удалось скомпилировать.

Ошибка в. /src/Components/common/Header.js

Модуль не найден:./src/images/logo.png в /var/www/html/wistful/src/Components/common

Пожалуйста, помогите мне решить это. Дайте мне знать, что я делаю не так здесь.

Ответ 1

Если у вас есть вопросы о создании React App, я рекомендую вам прочитать его Руководство пользователя.
Он отвечает на это и многие другие вопросы, которые могут возникнуть.

В частности, чтобы включить локальное изображение, у вас есть два варианта:

Использовать импорт:

// Assuming logo.png is in the same folder as JS file
import logo from './logo.png';

// ...later
<img src={logo} alt="logo" />

Этот подход велик, потому что все активы обрабатываются системой сборки и получат имена файлов с хешами в сборке. Вы также получите сообщение об ошибке, если файл перемещен или удален.

Недостатком является то, что он может стать громоздким, если у вас есть сотни изображений, потому что у вас нет произвольных путей импорта.

Использовать общую папку:

// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

Этот подход, как правило, не рекомендуется, но это здорово, если у вас сотни изображений и их импорт по одному слишком много хлопот. Недостатком является то, что вам приходится думать о сбое кеша и следить за перемещенными или удаленными файлами самостоятельно.

Надеюсь, это поможет!

Ответ 2

Если вы хотите загрузить изображение с local relative URL как вы делаете. Реагировать проект имеет по умолчанию public папки. Вы должны поместить папку с images внутри. Это будет работать.

Ответ 3

У вас есть разные пути для достижения этого, вот пример:

import myimage from './...' // wherever is it.

в тэге img просто поместите это в src:

<img src={myimage}...>

Вы также можете проверить официальные документы здесь: https://facebook.github.io/react-native/docs/image.html

Ответ 4

Вместо использования img src= "", попробуйте создать и установить background-image как изображение, которое вы хотите.

Прямо сейчас это работает для меня.