图像资源处理

优质

小牛编辑

136浏览

2023-12-01

图像资源引入有三种方式

Template 中通过 image src 指定图像资源
- 直接指定图像的远程资源地址
- 资源为本地路径，若配置 publicPath，则 publicPath 与 webpack loader 中配置的 name 进行拼接
Style 中通过 src 指定图像资源
Style 中通过 class 指定图像资源

Wxss文件中只能用 CDN 地址或 Base64, 针对第二、三种方式引入的资源，可以通过配置决定使用 CDN 还是 Base64，且 Mpx 中图像资源处理会优先检查 Base64，具体配置参数如下：

publicPath：资源存放 CDN 地址，可选
limit: 资源大小限制，可根据资源的大小判断走 Base64 还是 CDN，可选

Base64 图像资源

图像转 Base64的两种方式:

未配置 publicPath
配置了 publicPath，且用户未自定义图像处理 fallback query，且未配置 limit 或图像资源未超过 limit 的限制时

// webpack.config.js 配置,未配置 publicPath 必走 Base64
const webpackConfig = {
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: MpxWebpackPlugin.urlLoader({
        name: 'img/[name][hash].[ext]'
      })
    }]
  }
}

<style>
  .logo {
    background-image: url('~images/logo.png');
  }
</style>

CDN 图像资源

// webpack.config.js 配置
const webpackConfig = {
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: MpxWebpackPlugin.urlLoader({
        name: 'img/[name][hash].[ext]',
        // CDN 地址
        publicPath: 'http://a.com/',
        limit: '1024' // Base64 的最大长度，超过则走 CDN 
      })
    }]
  }
}

用户自定义图像处理方式

// webpack.config.js 配置
const webpackConfig = {
  module: {
    rules: [{
      test: /\.(png|jpe?g|gif|svg)$/,
      loader: MpxWebpackPlugin.urlLoader({
        name: 'img/[name][hash].[ext]',
        // CDN 地址
        publicPath: 'http://a.com/',
        limit: '1024' // Base64 的最大长度，超过则走 CDN,
        fallback: 'file-loader' // 默认走 file-loader
      })
    }]
  }
}

/*不走 Base64 的情况下*/
<style>
  .logo2 {
    background-image: url('~images/logo.png?fallback=true');
  }
</style>