ClientBundleがImageResourceをロードしない

Question

私は、ClientBundle実装を使用してイメージを大きなファイルに管理し、HTTPリクエストを最小限に抑えようとします。

私はイメージは、エラーを発見しないであろうClientBundle {

public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class); 

@Source("tiles/smiley.png") 
ImageResource smiley(); 

}

を拡張するResourceBundle ClientBundle

パブリックインターフェイスを生成し、私のgwt.xmlに

を置きます。

は、ここでは、単純なキャンバスを作成して、800×600のサイズを設定するコード

@Override公共ボイドonModuleLoad（）{

CLogger.log("Start Engine"); 

    int width = 800; 
    int height = 600; 

    Canvas canvas = Canvas.createIfSupported(); 
    canvas.setWidth(width + "px"); 
    canvas.setHeight(height + "px"); 
    canvas.setCoordinateSpaceWidth(width); 
    canvas.setCoordinateSpaceHeight(height); 
    Context2d c = canvas.getContext2d(); 

    Image img = new Image(ResourceBundle.INSTANCE.smiley()); 
    img.addLoadHandler(new LoadHandler() { 

     @Override 
     public void onLoad(LoadEvent event) { 
      CLogger.log(event.getSource() + " loaded"); 
     } 
    }); 
    CLogger.log("Visible: " + img.isVisible()); 

    c.drawImage((ImageElement) new Image(ResourceBundle.INSTANCE.smiley()).getElement().cast(), 0, 0); 

    RootPanel.get().add(canvas); 

}

あります。新しいContext2Dオブジェクトを作成して、コンテキストでイメージを描画し、キャンバスをRootPanelに追加します。

ログショー：

[20：10：21.676] - [スタートエンジン [20：10：21.851] - 可視：真 [20：10：21.853] - http://127.0.0.1:8888/engine/7D39451825E9952050F44A6B8E2E15F3.cache.png

画像ログされたURLの下に存在するので、すべてがうまく見えます。しかし、イメージは描画されないか、描画されますが、表示されません。

誰かアイデア？

私は、ClientBundleがイメージをバックエンドの開始点として読み込むと思っていました。だからインスタンスを取得すると、すべての画像/ CSSなどが読み込まれます。

Regars Markus

Answer 1

画像の内容が同期して読み込まれることは保証されません。ブラウザの機能と画像データのサイズによっては、リソースが独立したファイルとして保存されている可能性があります（例：cache.png）。このような製剤は何か変わるのでしょうか？

final Image img = new Image(ResourceBundle.INSTANCE.smiley()); 
img.addLoadHandler(new LoadHandler() { 
    public void onLoad(LoadEvent e) { 
    c.drawImage((ImageElement) img.getElement()); 
    } 
} 
RootPanel.get().add(img); 

Answer 2

あなたがUiBinderサンプルメッセージの外CSSResourcesとImageBundlesを使用している場合は、stlyesheetや画像が適切に注入されたことを確認する必要があります。

詳細については、hereを参照してください。