структура каталога img react.JS

Question

структура каталога img react.JS

Как мне получить изображения для отображения? 40 минут переподготовки и все равно никакой радости. Я думаю, что настоящий ответ заключается в том, куда я помещаю изображения.

Структура Главного реж.

App.js

public > index.js 

Views >

      index.jsx

      layouts >

          footer.jsx

          header.jsx

          master.jsx

Куда бы я ни поместил изображения, они не будут отображаться. главный файл, который вызывается и отображает html, - это index.jsx внутри папки views.

Я использую express для создания виртуального сервера и в качестве ядра ядра.

Я попробовал следующее внутри заголовка.файл jsx

<img src='images/main_home_icon.png'/>

<img src={require('images/main_home_icon.png')} />

585 1

javascript reactjs image

1 ответ:

Comments

Ничего не найдено.

CapCa · Accepted Answer · 2018-05-23 07:08:41

Это зависит. Если вы используете форму <img src='images/main_home_icon.png'/>, то ваш базовый путь - это общий каталог. Обычно вы создаете пакет.js с помощью browserify или webpack и поместите файл javascript в каталог с индексным файлом. Затем вам нужно будет поместить изображения в тот же каталог.

С другой стороны, вы можете включить свои изображения непосредственно в код javascript с помощью:

<img src={require('images/main_home_icon.png')} />

Тогда ваш базовый путь - это базовый путь файла jsx (в вашем случае: папка layouts). Я бы посоветовал использовать этот метод потому, что вы можете определить, например, в конфигурации webpack, какие изображения (в зависимости от их размера) должны быть включены в ваш файл bundle как строка base64, а какие включены только с их относительным путем.

Для дальнейшего чтения я бы предложил взглянуть на эту "поваренную книгу": https://github.com/christianalfoni/react-webpack-cookbook