Neolithic Psychedelic Mushrooms

    @mpxjs/url-loader

    1.0.15 • Public • Published

    mpx-url-loader

    solve url in mpx

    受限于小程序既有的能力,目前在小程序中加载本地图片资源会有诸多限制:

    • <style>中的css属性值只能使用base64引用图片,无法用本地路径
    • <template>中的<cover-image>组件的src属性只能通过本地路径,不能使用base64
    • <template>中的其他组件,例如<image>的src属性既可以用本地路径,又可以用base64

    @mpxjs/url-loader对这些限制提供了增强。开发者在源码中无需书写base64,通过统一的路径方式引入图片资源,最终编译成小程序支持的代码。

    想深入的了解@mpxjs/url-loader对小程序对图片资源的支持,查看mpx图像资源处理了解更多细节

    安装

    npm install @mpxjs/url-loader

    webpack.config.js

    webpackconfig = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: '@mpxjs/url-loader',
            options: /* options */
          }
        ]
      }
    }

    options

    仅对<template>和<script>中的资源生效,因为<style>里的资源会强制做base64

    • limit

      Number

      单位为byte,小于limit的资源会被base64,反之会被打包成资源

    • name

      String

      设置图片被打包后的路径: 'img/[name].[ext]'

    内联资源query options

    • fallback

      Any

      通过内联query options,可以对指定的资源强制使用资源打包。

      这对于<cover-image>组件引用图片资源非常有效,因为<cover-image>组件不能用base64

    例子

    文件目录

    component
    │-- index.mpx 
    │-- bg-img1.png    
    │-- bg-img2.png    
    │-- bg-img3.png    
    

    webpack.config.js

    webpackconfig = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: '@mpxjs/url-loader',
            otions: {
              limit: 10000,
              name: 'img/[name].[ext]'
            } 
          }
        ]
      }
    }

    index.mpx

    <template>
      <image src="./bg-img1.png"></image>
      <image src="./bg-img2.png"></image>
      <cover-image src="./bg-img3.png?fallback">
    </template>

    bg-img1.png大于10KB,会被打包成资源

    bg-img2.png小于10KB,会被做base64

    bg-img3.png需要在路径后添加fallback强制打包资源


    Keywords

    none

    Install

    npm i @mpxjs/url-loader

    DownloadsWeekly Downloads

    9

    Version

    1.0.15

    License

    Apache

    Unpacked Size

    15.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • blackgan3
    • pagnkelly
    • skyadmin
    • hiyuki
    • httpsxiao
    • commanderxl