动态引用本地资源

利用@mpxjs/url-loader，配合mpx提供的计算属性，实现在运行阶段动态设置图片

文件目录

  1.   component
  2.   │-- index.mpx 
  3.   │-- dark.png    
  4.   │-- light.png

webpack.config.js

  1. webpackconfig = {
  2.   module: {
  3.     rules: [
  4.       {
  5.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  6.         loader: MpxWebpackPlugin.urlLoader({
  7.           name: 'img/[name].[ext]'
  8.         })
  9.       }
  10.     ]
  11.   }
  12. }

index.mpx

  1. <template>
  2.   <view>
  3.     <image src='{{dynamicSrc}}'/>
  4.     <view class="container" style='{{dynamicStyle}}'>i have a background image</view>
  5.     <button bindtap="clickHandler">click me to change</button>
  6.   </view>
  7. </template>
  9. <script>
  10.   import {createPage} from '@mpxjs/core'
  11.   // 如果是有限张图片
  12.   import dark from './dark.png'
  13.   import light from './light.png'
  15.   createPage({
  16.     data: {
  17.       count: 0,
  18.       imageId: '1'
  19.     },
  20.     computed: {
  21.       dynamicSrc() {
  22.         return (this.count % 2 === 0) ? dark : light
  23.       },
  24.       dynamicStyle() {
  25.         let url = (this.count % 2 !== 0) ? dark : light
  26.         return `background-image: url(${url})`
  27.       },
  28.       background () {
  29.         // 如果期望整个bgs文件夹里的图片都被纳入
  30.         return require('./bgs/' + this.imageId + '.jpg')
  31.       }
  32.     },
  33.     methods: {
  34.       clickHandler() {
  35.         this.count++
  36.       }
  37.     }
  38.   })
  39. </script>
  41. <style lang="stylus">
  42.   .container
  43.     height: 150px
  44.   </style>

通过点击button，两个元素的图片会动态变化