Taro: 无法使用background-image

Created on 19 Jul 2018  ·  8Comments  ·  Source: NervJS/taro

问题描述
在组件内引入图片资源后,使用背景图样式时,预览时无法显示

复现步骤

// 先引入图片,然后把图片路径放在背景图片样式里面
<View>
        {
          show &&
          <View className="ticket" style={{backgroundImage: `url(${imgPath})`}}>
            <View className="title">{this.props.title}</View>
            <View className="date">{this.props.date}</View>
            <View className={infoActive ? 'info active' : 'info'}>{this.props.info}</View>
          </View>
        }
      </View>

开发者工具能正常显示

image

手机预览时该元素背景一片空白

期望行为
手机上正常显示

报错信息

微信小程序开发工具能正常显示
但是在手机预览或者远程调试时均不能正常显示,并且没有报错信息

系统信息

  • 操作系统: [e.g. mac]
  • Taro 版本 [e.g. v.0.0.64]
  • Node.js 版本 [e.g. v8.0.0]

补充信息

Most helpful comment

这个好像是小程序自己的问题,
background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

All 8 comments

试试使用网络图片

网络图片可以

但是我们这个项目没有静态文件服务器,用远程地址的图片很麻烦。

imgPath 是通过 import 引入的吗

image

是的,只不过在render函数里面做了判断赋值

这个好像是小程序自己的问题,
background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

好的,谢谢了,现在通过正式环境的上传图片接口暂时解决了

emmmmm. 祈求这几张图不要被删除。

266

imgPath 是通过 import 引入的吗

您好目前静态文件的映入只能是 import引入吗? 本地资源能否支持动态引入呢?

Was this page helpful?
0 / 5 - 0 ratings