Я новичок в ReactJS и хочу импортировать изображения в компонент. Эти изображения находятся внутри общей папки, и я не знаю, как получить доступ к папке из компонента реакции.

Есть идеи?

ИЗМЕНИТЬ

Я хочу импортировать изображение в Bottom.js или Header.js

Папка структуры:

enter image description here

Вебпаком не пользуюсь. Должен ли я?

Редактировать 2

Я хочу использовать веб-пакет для загрузки изображений и остальных ресурсов. Итак, в моей папке конфигурации у меня есть следующие файлы:

enter image description here

Куда и как добавить пути к изображениям?

Спасибо

Aceconhielo

Ответов: 11

Ответы (11)

Чтобы ссылаться на изображения публично, я знаю два способа сделать это прямо. Один подобен приведенному выше из Хомама Бахрани.

используя

     

И так как это работает, вам больше ничего не нужно, но это тоже работает ...

    

Для этого вам не нужна никакая конфигурация веб-пакета ..

В вашем компоненте просто укажите путь к изображению. По умолчанию response будет знать его в общедоступном каталоге.

image

1- Хорошо, если вы используете веб-пакет для конфигураций, но вы можете просто использовать путь к изображению, и реакция обнаружит, что он находится в общедоступном каталоге.


2- If you want to use webpack which is a standard practice in React. You can use these rules in your webpack.config.dev.js file.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

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

import image from '../../public/images/logofooter.png'


Создайте папку в общедоступных, например, активах, поместите свое изображение в эту папку и назначьте имя_папки / имя_изображения в src

Card image cap

здесь точно и три простой способ сделать это ...

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

  2. вы можете указать прямое имя изображения в src

    yourpic
    

// по умолчанию реакция в общей папке может отображать изображение в теге img

  1. const image = window.location.origin + "/image.png";
    

// если ваше изображение находится в общедоступном каталоге внутри папки imagecollection, вы можете импортировать его таким образом

  const image = window.location.origin + "/imagecollection /image.png";
 yourpic

Вы также можете использовать это ... он работает, если "yourimage.jpg" находится в вашей общей папке.


в документации это прекрасно объясняется, вы должны использовать process.env.PUBLIC_URL с изображениями, помещенными в общую папку. См. здесь для получения дополнительной информации

return ;

Простое решение - использовать такие пути / images / logoFooter.png. Если файл находится непосредственно в папке public, выполните / someImage.png. Можете пойти глубже, / x / y / z / image.png. Рассматривайте локализирующую часть изображения как абсолютное местоположение этого изображения.

Для получения дополнительной информации см. https://create-react-app.dev/docs/using-the-public-folder/.

Вы должны использовать здесь webpack, чтобы облегчить себе жизнь. Добавьте в свою конфигурацию правило ниже:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

После этого вы можете просто импортировать изображения в свои компоненты реакции:

import myImage from 'publicfolder/images/Image1.png'

Используйте myImage, как показано ниже:

или если изображение импортировано в локальное состояние компонента

Попробуйте это просто и просто

  1. Не делать папку изображений в src.
  2. Сделать папку изображений общедоступной.
  3. вы работаете в установке реакции-бутстрапа

npm установить response-bootstrap

импортировать React из response;
  
импортировать 'bootstrap / dist / css / bootstrap.min.css';
импортировать {Изображение} из 'response-bootstrap';
экспортировать функцию по умолчанию Main () {
   
   возвращение (
     <>
          bg image
     
    )
 }

Надеюсь, что готово

Мы знаем, что React - это SPA. Все визуализируется из корневого компонента с помощью расширение до соответствующего HTML из JSX.

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

В вашем случае это должно работать везде:

"./ images / logofooter.png"

2022 WebDevInsider