Добавить динамическое локальное изображение в SRC из реквизита

Question

Я новичок в React и наткнулся на проблему, для которой не могу найти ответы.

Мне нужно передать локальный источник изображения в свойство src img, но этодолжен быть передан через реквизит.Есть ли способ добиться этого для локального изображения (не может использовать URL).Я читал, что если вы укажете require, вы не сможете использовать переменную.

Я предполагаю, что мне, возможно, придется использовать webpack для решения этой проблемы, но я незнаком с этим.

Answer 1

Во-первых, fyi - require - это не React API, его API Commonjs, в основном используется в node.js. Second - Кажется, вы представляете две проблемы:

1. Использование локального образа безиспользуя URL.Ну, javascript не скомпилирован в dll, как другие языки / фреймворки, это язык сценариев.Поэтому вы не можете встроить изображение в вашу систему.Тем не менее, вы можете создать папку в папке dist (также может быть создана сборкой webpack), которая будет содержать ваши ресурсы - например, изображение.Затем вы можете импортировать его в свой код через относительный URL.Если он находится в JSX, вы можете импортировать его так же, как и любой другой пакет, с относительным путем.Если это css, вы можете использовать синтаксис url (...).

2. Передача URL через реквизит - как и все остальное.Вы упоминаете в ссылке на компонент поле, которое хотите использовать как поле проп, например, «изображение», а внутри компонента вы можете использовать this.props.image.Использование там простой строки или импортированного «объекта», как упомянуто выше, будет вести себя точно так же, и вы можете использовать его в поле img src.

Удачи!