问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

umijs 怎么配置图片小于多少kb打包成base64？

头像
忆故人
    44811541

    umijs 怎么配置图片小于多少kb打包成base64？help

    我查看打包出来的文件，好像还是("img",{className:b.state==="doing"?"doingMove":"",style:{background:"#fff",borderRadius:"50%",marginRight:"6px",width:"40px"},src:"/icon/doing.png"})}),(0,e.jsx)

     chainWebpack(config, { env, webpack }) {
    // 添加对图片的处理，小于40KB的图片将被打包成Base64
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 1024 * 1024 * 40, // 这里设置限制大小，单位是字节（bytes）
        name: 'img/[name].[hash:7].[ext]',
      })
      .end();

    // 还可以进行其他自定义Webpack配置
    return config;
  }

 <img
                  className={tableData.state === 'doing' ? 'doingMove' : ''}
                  style={{
                    background: '#fff',
                    borderRadius: '50%',
                    marginRight: '6px',
                    width: '40px',
                  }}
                  src={'/icon/doing.png'}
                />
    前端
    阅读 1.7k
    avatarAI BotBETA

    在umijs中，没有直接配置将图片打包成base64的方式，因为它不直接涉及到构建或打包的过程。umijs是一个基于webpack的UI框架，它主要关注的是组件和UI的设计，而不是底层的构建和打包过程。

    然而，你可以通过修改webpack的配置来实现这样的需求。在webpack中，你可以使用file-loader或url-loader插件来处理图片，并通过设置它们的大小限制来控制图片是否被转化为base64。

    下面是一个简单的示例配置，超过100kb的图片将被转化为base64，而小于100kb的图片则会被作为URL引用：

    // webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 100 * 1024, // 100kb
              outputPath: 'images', // 打包后的图片存放目录
              publicPath: '/images', // 生成的url路径前缀
              name: '[name].[hash].[ext]' // 文件名及后缀
            }
          }
        ]
      }
    ]
  }
}

    在这个配置中，limit属性是关键，它指定了只有当文件大小超过这个值（本例中是100kb）时，才会将文件转化为base64编码。如果文件大小小于这个值，将会作为外部链接（URL）引用。

    需要注意的是，这个配置需要安装并引入url-loader这个webpack插件。你可以通过npm或yarn来安装它：

    npm install --save-dev url-loader
# 或
yarn add --dev url-loader

    然后，在你的项目中引入它：

    // webpack.config.js
const UrlLoader = require('url-loader');
//...

    这样就可以在webpack构建过程中处理图片了。

    2 个回答
    得票最新
    头像
    忆故人
      44811541
      ✓ 已被采纳

      https://umijs.org/docs/api/config#inlinelimit

      export default defineConfig({
inlineLimit:　1024*40 // 40kb
})

      官网有配置项。注意不要把图片资源放到public,放到src/assets/里面。

      <img src="required(@/assets/xx.png)" />
      头像
      乔治
        12.7k1329

        找一下config文件里：

        import { defineConfig } from 'umi';

export default defineConfig({
  // ...其他配置

  chainWebpack(config) {
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000, // 这里设置限制大小，单位是字节（bytes），10000字节 ≈ 10KB
        name: 'img/[name].[hash:7].[ext]',
      })
      .end();
  },
});
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏