[Taro Next] 统一的静态资源引入方式（本地图片、Image、backgroundImage in Css）

[charmtiger]

问题描述

• 微信小程序下无法在 Scss 中使用 url 引入本地图片
• 微信小程序与h5 使用 require() 引入本地图片的方式不同，h5 必须是require().default 而小程序则不用

### 期望行为

可以同 web 一样的体验

### 系统信息

  Taro CLI 3.0.0-alpha.7 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
      Yarn: 1.22.4 - ~/.config/yarn/global/node_modules/.bin/yarn
      npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.0-beta.5 => 3.0.0-beta.5 
      @tarojs/components: 3.0.0-beta.5 => 3.0.0-beta.5 
      @tarojs/taro: 3.0.0-beta.5 => 3.0.0-beta.5 
      @tarojs/webpack-runner: 3.0.0-beta.5 => 3.0.0-beta.5 
      eslint-config-taro: 3.0.0-beta.5 => 3.0.0-beta.5 
      nerv-devtools: ^1.5.6 => 1.5.6 
      nervjs: ^1.5.6 => 1.5.6 
      react: ^16.10.0 => 16.13.0 

[taro-bot]

CC @Littly

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@charmtiger 微信不支持 wxss 中获取本地资源。

你可以配置一下 mini.imageUrlLoaderOption，将 limit 设高一些，被 urlLoader 处理成 base64。太大的图片还是走网络获取吧。

mini: {
    imageUrlLoaderOption: {
      limit: 10240
    }
}

[charmtiger]

嗯，用量不多，手动转base64了。

[Chen-jj]

@charmtiger

微信小程序与h5 使用 require() 引入本地图片的方式不同，h5 必须是require().default 而小程序则不用

这是什么写法呢？用 import 在小程序和 h5 都正常：

import React, { Component } from 'react'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'
import './detail.sass'
import Bg from './bg.png'

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Image src={Bg}></Image>
      </View>
    )
  }
}

[charmtiger]

import 加载本地图片 不就是这样写的吗

[Chen-jj]

所以没懂你的第二点是什么意思。。

[charmtiger]

import 加载没问题，我主要是说 require 在 小程序 和 h5 中的用法不同，一个需要 .default , 一个不用

[Chen-jj]

@charmtiger 因为 h5 用了 3.0 的 url-loader，小程序用的还是 2.0，而 3.0 有个 Breaking Changes，默认设置了 esModule 为 true。

之后会都改用 3.0，意思默认都需要 require().default。当然你也可以改 mini.imageUrlLoaderOption 的 esModule 为 false。

[charmtiger]

可以的，我认为如果需要用户自己配置的话，应该在文档中体现出来

[Chen-jj]

各 loader 的详细配置默认都是跳到 loader 自己的文档浏览

[charmtiger]

好的