Wechat Miniprogram: How to display local image with <img> tag?

Question

The standard <image> tag works fine with a local image:

<image src="../../data/pics/1001.png"></image>

The tag <rich-text> works fine with remote images:

<rich-text nodes='<img src="http://images.kaishiba.com/o_1cs1glier2lsdge1q9irbs1a5u4e.jpg">'
></rich-text>

But the <rich-text> tag doesn't work anymore with my local image:

<rich-text nodes='<img src="../../data/pics/1001.png">'
></rich-text>

I just get a little empty square on the screen.

From the official documentation here , it is supposed to be supported.

Is there something wrong in my code?

Answer 1

The answer was in the Bug & Tip section:

6. tip: img label only supports network images.

Answer 2

works fine for me with local path in.wxml file. I set the variable.js file and called that for path. It works with normal string as well.

But in.wxss file, it didn't work as background-image url. Here it works with network images only. .js code

data: { 
    profileImg: '../../media/profilePic1.png'
  }

.wxml code. called above

<image class="userinfo-avatar" src="{{profileImg}}" mode="cover"></image>

.wxss file code didn't work for local image path

.bg
{
background-image: url('../../media/profilePic1.png');
}