Cross-device local assets location in Weex

Question

Working with Weex 0.16 I generated the default "WeexDemo" project for Web, iOS and Android, and the default index files works without issue.

I'm trying to figure out the folder location where I can put image files and other assets. I changed the "logoUrl" from an http url to a relative path ('bg.png')

Serving on the browser over 8080 port web root is the project root folder, so if I copy bg.png to "dist" folder I can see it when logoUrl is "/dist/bg.png"
On the iOS project "/dist/bg.png" does not work, since the root seems to be the "dist" folder itself, if I change to logoUrl "bg.png", it works.
On the Android project, both "/dist/bg.png" or "bg.png" fail. I can see in the folder "/platforms/android/app/src/main/assets/dist" the bg.png file has been copied but I don't seem to able to access it.

Is there any solution where I can use the same folder to drop the assets and have it accessible for all devices?

RajeshVijayakumar · Answer 1 · 2018-05-14T10:07:18.147

Do as follows :

In your application class :

 WXSDKEngine.registerComponent("yourImage", YourImage.class);

create class YourImage.java and it should look like this :

public class YourImage extends WXComponent<ImageView> {

public YourImage(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
    super(instance, dom, parent);
}

@Override
protected ImageView initComponentHostView(@NonNull Context context) {
    ImageView imageView = new ImageView(context);
    return imageView;
}

@WXComponentProp(name = Constants.Name.SRC)
public void setSrc(String src) {

    if (src == null) {
        return;
    }

    if(null != getHostView()) {       
      Picasso.with(WXEnvironment.getApplication()).load(src).into(getHostView());
    }
  }
}

In your vue/js file

<yourImage class="image" :src="url"> </yourImage>

In your WeexUIFragment/Activity : while loading page data through map, add one key and value as follows:

    HashMap<String, Object> map = new HashMap<>();

    map.add("image_url", "android local asset url")
    map.put("PAGENAME", "");
    mWXSDKInstance = new WXSDKInstance(YourCurrentActivity.this);
    mWXSDKInstance.registerRenderListener(YourCurrentActivity.this);
    mWXSDKInstance.render(pageName, weexJSUrl, map, null, WXRenderStrategy.APPEND_ASYNC);

In JS file in script/data block to retrieve asset local image url:

const url = _.get(weex,'config.image_url')

If you need more help: You can look into Component Extend section in below link : https://weex.incubator.apache.org/guide/extend-android.html

Cross-device local assets location in Weex

1 Answers1