11

私のテンプレートでは、私は次のようなことをしています

<img class="someClass" src="{{imgURL}}">

画像は正しく読み込まれますが、次のような警告が表示されます。

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

これを修正する方法はありますか？

4

4 に答える 4

15

2つの問題があります。

  1. 締めくくりの引用が<img>ありませんが、それは大したことではありません。
  2. テンプレートは、<div>HTMLを含む非表示または同様の要素に保存されています。

あなたがこれを言うならば：

<div id="t" style="display: none">
    <img class="someClass" src="{{imgURL}}">
</div>

ブラウザはを実際の画像として解釈<img>し、属性で指定されたリソースを読み込もうとしsrcます。これが404の場所です。

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

から来た。テンプレートが有効で適切に形成されたHTMLになることはめったにないため、ブラウザがテンプレートをHTMLとして解釈しようとしないようにする必要があります。通常のアプローチは、テンプレートを<script>HTML以外ので保存することtypeです。

<script id="t" type="text/x-handlebars-template">
    <img class="someClass" src="{{imgURL}}">
</script>

次に、コンパイルされたテンプレートを取得すると言うことができHandlebars.compile($('#t').html())、ブラウザは#tコンテンツをHTMLとして解釈しようとしません。

于 2012-09-21T17:17:01.927 に答える
5

答えはどれも私にはうまくいきませんでした。画像をbase64に変換し、それをハンドルバーテンプレート内のimgsrcとして送信することで機能するようになりました

template.hbs

{{#if img_src}}
    <img src="{{{img_src}}}" alt=""/>
{{/if}}

source.js

data = {
         img_src: base64img.base64Sync('./assets/img/test.png');
       }
于 2018-11-29T16:18:44.353 に答える
3

私はそれが遅いことを知っていますが、ここにあなたが望むことをする方法があります：

var view = Ember.View.create({templateName: 'myTemplate', myPicture: 'http://url_of_my_picture.png'});

view.appendTo('#myDiv');

<script type="text/x-handlebars" data-template-name="myTemplate">
    <img {{bindAttr src="myPicture"}}>
</script>
于 2012-11-28T18:04:58.020 に答える
0

トリプルブラケットを使用すると問題なく機能することがわかりました。

<img src="{{{your source}}}" alt={{{your alt}}} />
于 2017-11-27T02:58:49.903 に答える