动态添加图像React Webpack

7 回答

• 5

  这是代码

  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;
  

  回复于 2024-04-29T16:50:21+08:00
• 85

  如果您正在寻找从图像导入所有图像的方法

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

  你可以在这里找到原始主题：Dynamically import images from a directory using webpack

  回复于 2024-04-29T16:50:21+08:00
• 5

  如果您在服务器端捆绑代码，那么没有什么能阻止您直接从jsx请求资产：

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

  回复于 2024-04-29T16:50:21+08:00
• 14

  您没有将图像嵌入到包中 . 它们是通过浏览器调用的 . 所以这是;

  var imgSrc = './image/image1.jpg';
  
  return <img src={imgSrc} />
  

  回复于 2024-04-29T16:50:21+08:00
• 4

  因此，您必须在父组件上添加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>
      );
    }
  }
  

  回复于 2024-04-29T16:50:21+08:00
• 0

  使用url-loader，这里描述https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html，然后你可以在你的代码中使用：

  import LogoImg from 'YOUR_PATH/logo.png';
  

  和

  <img src={LogoImg}/>
  

  回复于 2024-04-29T16:50:21+08:00
• 1

  UPDATE ：这只测试了服务器端渲染（通用Javascript）这里是我的boilerplate .

  只有文件加载器，您可以动态加载图像 - the trick is to use ES6 template strings ，以便Webpack可以选择它：

  这将 NOT 工作 . ：

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

  要解决此问题，只需使用模板字符串：

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

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

  回复于 2024-04-29T16:50:21+08:00