http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5でこのコード (一種のチュートリアル)を使用しました ... このコードでは、「画像のスケール/サイズ変更」コードを使用し、見つけました説明できない何か。つまり、使用する代わりに:
final Image img = new Image("/img/test.jpg");
クライアントバンドルを使用したため、次のコードを使用しました。
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());
エラーはありませんが、画像は表示されませんでした。最後に、次の方法で解決策を見つけました。
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());
「.getSafeUri()」が問題を解決する理由を知っていますか?
ClientBundle の ImageResource を実際の <img> 要素として参照する
でImage作成されたImageResourceは無条件に切り抜き画像を使用します。この画像は CSS 背景画像として設定されます (および は1×1px の透明 GIF です) <img>。srcイメージは実際には空白の GIF であるため、キャンバスにペイントしても何も目立ちません。canvas は CSS スタイルを考慮しません。
を使用すると、のとして使用される画像getSafeUri()のURL が得られます。いいえ、キャンバスに画像が正しく描かれています。data:src<img>blank.gif
ただし、デフォルトでは IE6 および IE7 では機能しないgetSafeUri()ことに注意してください。それらをサポートする必要がある場合は、 または で注釈を付ける必要があります。または、 s の代わりにsを使用することもできます。ImageResource@ImageOptions(preventInlining = true)@ImageOptions(repeatStyle = RepeatStyle.Both)DataResourceImageResource