新建默认模板，H5无法调用图片

[netzhouxiang]

相关平台

H5

复现仓库

https://github.com/netzhouxiang/taro_test
浏览器版本: Chrome
使用框架: Vue 2

复现步骤

1.按步骤创建（Vue2 TypeScript Sass）项目，使用默认模板
2.添加src/resource文件夹（包含banner图片），修改pages/index/index，增加image标签引入图片../../resource/banner.png
3.直接npm run dev:h5；浏览器不显示
4.如果配置h5: {imageUrlLoaderOption: {esModule: false}}，则tabbar图标又不显示

期望结果

正常显示图片

实际结果

不显示图片

环境信息

👽 Taro v3.0.14

  Taro CLI 3.0.14 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 10.11.0 - C:\Program Files\nodejs\node.EXE
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

---

补充信息

有没有可能是node版本导致，我最近做区块链给node降级了，降到 v10.11.0 了

[luckyadam]

你好，这是 taro 的问题，目前可以通过以下写法绕过，不用自行配置 esModule 配置

<template>
  <view class="index">
    <text>{{ msg }}</text>
    <image :src="banner"></image>
  </view>
</template>

<script>
import banner from '../../resource/banner.png'
import './index.scss'

export default {
  data () {
    return {
      msg: 'Hello world!',
      banner
    }
  }
}
</script>

[luckyadam]

#7872 这个 pr 将修复这个问题，版本发布后可以支持直接使用 src 引用图片

[netzhouxiang]

好的

[Midas-Li]

现在我用taro+react+taroui+ts，也是h5，也是有这个问题。还没更新，希望能解决。谢谢。