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

Я пытался выяснить, как динамически добавлять изображения через React и Webpack. У меня есть папка с изображениями под src / images и компонент под src / components / index . Я использую url-loader со следующей конфигурацией для webpack

{ test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 

Внутри компонента, который я знаю, я могу добавить require (image_path) для определенного изображения в верхней части файла, прежде чем я создам компонент, но хочу сделать компонент общим и заставить его взять свойство с пути для изображения, которое передается из родительский компонент.

Я пробовал:

  

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

Файловая система

 |-- src | ` app.js | `--images | ` image.jpg | ` image.jpg | `-- components | `parent_component.js | `child_component.js 

Родительский компонент в основном представляет собой контейнер для хранения кратных дочерних элементов, поэтому …

   etc.... 

Есть ли способ сделать это, используя реакцию и webpack с url-loader, или я просто иду по неправильному пути, чтобы подойти к этому?

Используя url-loader, описанный здесь https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html , вы можете использовать его в своем коде:

 import LogoImg from 'YOUR_PATH/logo.png'; 

а также

  

Если вы связываете свой код со стороны сервера, то нет ничего, что мешало бы вам требовать от активов непосредственно из jsx:

 

Image

Поэтому вам нужно добавить оператор import на свой родительский компонент:

 class ParentClass extends Component { render() { const img = require('../images/img.png'); return ( 
); } }

и в дочернем classе:

 class ChildClass extends Component { render() { return ( 
); } }

Вы не вставляете изображения в комплект. Они вызывают через браузер. Так что это;

 var imgSrc = './image/image1.jpg'; return  

UPDATE : это только проверенный на стороне сервера рендеринг (универсальный Javascript) здесь мой шаблон .

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

Это НЕ будет работать. :

 const myImg = './cute.jpg'  

Чтобы исправить это, просто используйте вместо него строки шаблона:

 const myImg = './cute.jpg'  

webpack.config.js:

 var HtmlWebpackPlugin = require('html-webpack-plugin') var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') module.exports = { entry : './src/app.js', output : { path : './dist', filename : 'app.bundle.js' }, plugins : [ new ExtractTextWebpackPlugin('app.bundle.css')], module : { rules : [{ test : /\.css$/, use : ExtractTextWebpackPlugin.extract({ fallback : 'style-loader', use: 'css-loader' }) },{ test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['react','es2015'] } },{ test : /\.jpg$/, exclude: /(node_modules)/, loader : 'file-loader' }] } } 

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

 // Import all images in image folder function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); }); return images; } const images = importAll(require.context('../images', false, /\.(gif|jpe?g|svg)$/)); 

Затем:

  

Здесь вы можете найти исходный stream: динамически импортировать изображения из каталога с помощью webpack

вот код

  import React, { Component } from 'react'; import logo from './logo.svg'; import './image.css'; import Dropdown from 'react-dropdown'; import axios from 'axios'; let obj = {}; class App extends Component { constructor(){ super(); this.state = { selectedFiles: [] } this.fileUploadHandler = this.fileUploadHandler.bind(this); } fileUploadHandler(file){ let selectedFiles_ = this.state.selectedFiles; selectedFiles_.push(file); this.setState({selectedFiles: selectedFiles_}); } render() { let Images = this.state.selectedFiles.map(image => { 
}); return (
{Images}
); } } export default App;
  • как заполнить цвет изображения в определенной области?
  • Изменение размера изображения с билинейной интерполяцией без увеличения
  • Пользовательский интерфейс
  • Android получает изображение из галереи в ImageView
  • Как применить всплески Габора к изображению?
  • Поиск конкретных цветов пикселей BitmapImage
  • c # Изменение размера изображения до разного размера при сохранении соотношения сторон
  • Как изменить определенный цвет в изображении?
  • Android: Как подключить временное, сгенерированное изображение к электронному письму?
  • java.lang.OutOfMemoryError - BitmapFactory.decode (strPath)
  • Выберите несколько изображений из фотоальбома на Android с помощью намерений
  • Interesting Posts

    Как маршалировать без пространства имен?

    Как установить Windows 7 в качестве ОС по умолчанию, но сохранить экран загрузки Windows 8?

    Как заполнить формы и отправить с помощью Webclient в C #

    Где я должен разместить драйвер JDBC для пула соединений Tomcat?

    Как регистрировать типы файлов / расширения с помощью установщика WiX?

    Почему этот встроенный блок блокируется вниз?

    Имя пользователя ASP.Net для электронной почты

    Подключение нескольких точек доступа

    Поддерживаются ли резервные копии Time Machine? А Time Machine лучше на Snow Leopard?

    Тестирование модhive Android Studio: чтение данных (ввода)

    Нужно ли форматировать / разделять диск назначения ddrescue?

    Некоторые вопросы о сети с аэропортом

    Как я могу анализировать файл .hprof?

    В чем разница между параметрами компилятора / Ox и / O2?

    Почему я должен получать более медленные загрузки на компьютере под управлением Windows, чем мой Mac?

    Давайте будем гением компьютера.