Динамическое Добавление Изображений React Webpack

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



    {

      test: /.(png|jpg|)$/,

      loader: 'url-loader?limit=200000'

    }


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



то, что я пробовал:



<img src={require(this.props.img)} />


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



файловой системы 



|-- src

|   ` app.js

|   `--images

|      ` image.jpg

|      ` image.jpg

|   `-- components

|      `parent_component.js

|      `child_component.js


родительский компонент в основном просто контейнер для хранения кратных дочернего так...



<ChildComponent img=data.img1 />

<ChildComponent img=data.img2 />

etc....


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

1060   7  

7 ответов:

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

import LogoImg from 'YOUR_PATH/logo.png';

и

<img src={LogoImg}/>
85  
2016-02-17 13:02:02

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

<div>
  <h1>Image</h1>
  <img src={require('./assets/image.png')} />
</div>
12  
2016-09-24 16:00:41

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

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

и в дочернем классе:

class ChildClass extends Component {
  render() {
    return (
      <div>
          <img
            src={this.props.img}
          />
      </div>
    );
  }
}
5  
2016-06-16 10:42:12

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

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

return <img src={imgSrc} />
4  
2015-09-16 19:21:01

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

С помощью только file-loader вы можете загружать изображения динамически -хитрость заключается в использовании строк шаблона ES6 так что Webpack может забрать его:

Это не работа. :

const myImg = './cute.jpg'
<img src={require(myImg)} />

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

const myImg = './cute.jpg'
<img src={require(`${myImg}`)} />

webpack.конфиг.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'
    }]
  }
}
4  
2017-07-24 06:34:30

здесь код

    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 => {
          <div className = "image_parent">

              <img src={require(image.src)}
              />
          </div>
        });

        return (
            <div className="image-upload images_main">

            <input type="file" onClick={this.fileUploadHandler}/>
            {Images}

            </div>
        );
      }
    }

    export default App;
1  
2018-06-24 10:59:07

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

// 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)$/));

затем:

<img src={images['image-01.jpg']}/>

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

0  
2018-05-11 14:50:30

Comments

    Ничего не найдено.
Click here to cancel reply.