이미지 동적 추가 리액트 웹 팩

이미지 동적 추가 리액트 웹 팩

React와 Webpack을 통해 동적으로 이미지를 추가하는 방법을 찾고 있습니다.src/images 아래에 이미지 폴더가 있고 src/components/index 아래에 컴포넌트가 있습니다.웹 팩에 대해 다음 구성의 URL 로더를 사용하고 있습니다.

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

컴포넌트 내에서 컴포넌트를 작성하기 전에 파일 상단에 특정 이미지에 대한 require(image_path)를 추가할 수 있지만 컴포넌트를 범용으로 하여 부모 컴포넌트에서 전달된 이미지의 경로와 함께 속성을 가져오도록 하겠습니다.

내가 시도한 것은:

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

실제 속성에서는 프로젝트 루트, 리액트 앱 루트 및 컴포넌트 자체에서 이미지에 대해 생각할 수 있는 거의 모든 경로를 시도했습니다.

파일 시스템

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

부모 부품은 기본적으로 여러 개의 아이를 담을 수 있는 용기입니다. 그래서...

<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....

url-loader를 사용하여 react와 webpack을 사용하여 이 작업을 수행할 수 있는 방법이 있습니까?아니면 제가 잘못된 경로로 접근하고 있는 것일까요?

여기서 설명하는 url-loader(SurveJS - 이미지 로드)를 사용하면 코드에서 다음을 사용할 수 있습니다.

import LogoImg from 'YOUR_PATH/logo.png';

그리고.

<img src={LogoImg}/>

Edit(편집): 정밀도. 이 기술을 사용하여 js 아카이브에 이미지가 인라인 처리됩니다.작은 이미지에도 적합할 수 있지만, 그 기술을 현명하게 사용하세요.

코드를 서버 측에서 번들하는 경우 jsx에서 직접 자산을 요구하는 것을 막을 수 없습니다.

<div>
  <h1>Image</h1>
  <img src={require('./assets/image.png')} />
</div>

업데이트: 이것은 서버측 렌더링(범용 Javascript)에서만 테스트된 것입니다.이것이 제 보일러 플레이트입니다.

파일 로더만 있으면 이미지를 동적으로 로드할 수 있습니다. 비결은 ES6 템플릿 문자열을 사용하여 웹 팩이 이미지를 픽업하는 것입니다.

이렇게 하면 안 돼요.:

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

이 문제를 해결하려면 템플릿 문자열을 대신 사용합니다.

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

webpack.config.syslog:

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하는 방법을 찾고 있는 경우

// 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']}/>

원본 스레드는 여기에서 찾을 수 있습니다: 웹 팩을 사용하여 디렉토리에서 이미지를 동적으로 가져옵니다.

따라서 부모 컴포넌트에 Import 스테이트먼트를 추가해야 합니다.

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>
    );
  }
}

이미지를 번들에 포함시키지 않습니다.브라우저를 통해 호출됩니다.그렇구나.

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

return <img src={imgSrc} />

여기 암호가 있습니다.

    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;

언급URL : https://stackoverflow.com/questions/32612912/dynamically-add-images-react-webpack