动态添加图片 React Webpack

IT技术 reactjs webpack image-loading urlloader
2021-04-09 01:11:14

我一直在尝试弄清楚如何通过 React 和 Webpack 动态添加图像。我在src/images下有一个图像文件夹， 在src/components/index下有一个组件。我正在使用带有以下 webpack 配置的 url-loader

    {
      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....

有什么方法可以使用带有 url-loader 的 react 和 webpack 来做到这一点，还是我只是走错了路来解决这个问题？

6个回答

使用此处描述的 url-loader ( SurviveJS - Loading Images )，然后您可以在代码中使用：

import LogoImg from 'YOUR_PATH/logo.png';

和

<img src={LogoImg}/>

编辑：精确度，图像使用这种技术内联在 js 存档中。它可以用于小图像，但要明智地使用该技术。

我想知道如何从返回图像的 API 加载此图像。
2021-05-28 01:11:14
谢谢，这很好用。你引用的文章最后还提到如果你使用的是React，那么你使用babel-plugin-transform-react-jsx-img-import 自动生成导入。这样你就可以写 <img src="YOUR_PATH/logo.png"/>
2021-06-06 01:11:14
是的，图像内联了这种技术。这完全取决于文件的重量。对于小的（主要是我的图标），它可能是值得的。我会编辑回复
2021-06-06 01:11:14
我不确定：如果您希望用户浏览器从 API 加载图像，它与 webpack 无关。只需使用一个变量（可能在调用 API 后定义）作为 <img> src。这里的想法是将图像包含在您的源和 webpack 存档中。（参见stackoverflow.com/questions/32612912/...）
2021-06-10 01:11:14
警告：url-loader 会将图像文件内联为 base64 ascii 字符串。这减少了加载页面所需的文件访问次数，但以下载更多字节为代价。因此，在生产中使用文件加载器可能会更好。
2021-06-18 01:11:14

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

<div>
  <h1>Image</h1>
  <img src={require('./assets/image.png')} />
</div>
如果这不起作用，则在 require() 之后添加 .default。例如：我使用的是const src = require(资产/图像/${name}).default;
2021-05-30 01:11:14
@BrendanMoore 但请记住，在您的情况下，捆绑程序（例如 webpack）会将images文件夹中的所有图像添加到最终捆绑包中。
2021-06-20 01:11:14
这是我需要在构建组件之前我不知道图像文件的情况下使用的。我传入一个imageFilename道具，然后使用<img src={require(`./images/${imageFilename}`)} />. 感谢发布。
2021-06-21 01:11:14
正是我要找的。谢谢@JamesAkwuh
2021-06-21 01:11:14

更新：这仅使用服务器端呈现（通用 Javascript）进行了测试，这是我的样板。

仅使用文件加载器，您就可以动态加载图像——诀窍是使用 ES6 模板字符串，以便 Webpack 可以获取它：

这将不工作。：

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'
    }]
  }
}
对我来说缺少的是 webpack 配置中的测试。谢谢。
2021-05-22 01:11:14

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

// 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

所以你必须在你的父组件上添加一个 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>
    );
  }
}
其它你可能感兴趣的问题
上一篇react-hooks。无法对卸载的组件执行 React 状态更新 下一篇React - 表达式必须有一个父元素？