LENKER templating und dynamische Bilder

In meine Vorlagen, die ich Tue etwas wie

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

Die Bilder werden korrekt geladen, aber ich bekomme Warnungen, wie:

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

Gibt es eine Möglichkeit dieses Problem zu beheben?

Ist die Vorlage an die Seite, bevor analysiert wird, die von Ihrem Template-engine? Wenn dem so ist, sehe ich keine Abhilfe.
Ich glaube das nicht. Ich habe da ein ajax-Aufruf, packt meine externe LENKER Vorlagen. Ich cache diese Vorlagen und später habe ich eine Funktion, die den json-Daten und findet die richtige Vorlage als Quelle verwenden und dann habe ich den Quellcode kompilieren und übergeben Sie die json-Daten an das kompilierte template. Gibt es etwas über diese Methode dazu führen würde, dass diese Warnungen?
Das ist seltsam dann. Nun, wenn Sie erstellen ein Bild-element mit der Quelle, stellt der browser eine Anfrage, um zu versuchen, um cache ist es schon. Wenn die Vorlage wird geparst als string dann analysiert, in die DOM-Elemente, die sollte nicht passieren. Aber wie auch immer, Sie können ignorieren, dass die Art der Warnung, es ist nur, um Ihnen mitzuteilen, dass die angeforderte Datei nicht gefunden wurde (das ist richtig, bevor Sie tauscht die Quell-und es wieder lädt), regelmäßige end-Benutzer nicht über Ihre Konsolen öffnen Sie beim surfen auf Ihrer Website. =]

InformationsquelleAutor swallace | 2012-09-21

13

Haben Sie zwei Probleme:
1. Du bist fehlt eine schließende Anführungszeichen in Ihrem <img> aber das ist keine große Sache.
2. Ihre Vorlage gespeichert wird, in einer versteckten <div> oder ähnliches element, das HTML enthält.
Wenn Sie sagen:
```
<div id="t" style="display: none">
    <img class="someClass" src="{{imgURL}}">
</div>
```
browser interpretieren den <img> als echtes Bild und versuchen, laden Sie die Ressource in der angegebenen src - Attribut, das ist, wo Sie Ihre 404:
```
GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)
```
kommt. Vorlagen sind selten gültig und richtig geformt HTML, so dass Sie benötigen, um die browser versuchen zu interpretieren Vorlage als HTML. Die übliche Vorgehensweise ist, die zum speichern der Vorlage in einem <script> mit einem nicht-HTML -type:
```
<script id="t" type="text/x-handlebars-template">
    <img class="someClass" src="{{imgURL}}">
</script>
```
Dann kann man sagen Handlebars.compile($('#t').html()) um Ihre kompilierte template und der browser nicht mehr versuchen zu interpretieren, die #t Inhalt als HTML.
- Dank dieser Feste meine Warnung.
InformationsquelleAutor mu is too short

Ich weiß, es ist spät, aber hier ist, wie zu tun, was Sie wollen :

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>

InformationsquelleAutor Benjamin L.

0

Ich fand, dass mit dreifach-Klammern funktionieren.
```
<img src="{{{your source}}}" alt={{{your alt}}} />
```
- Die Frage wurde in 2012, vor über 5 Jahren. Sind Sie sicher, dass diese neue Antwort ist anwendbar auf die 2012 version handebars.js?
InformationsquelleAutor Kyriediculous
0

Keiner der Antworten, die für mich gearbeitet. Ich habe es zu arbeiten, konvertieren Sie das Bild in base64 und senden diese als img-src im inneren der LENKER Vorlage

Vorlage.hbs
```
{{#if img_src}}
    <img src="{{{img_src}}}" alt=""/>
{{/if}}
```
source.js
```
data = {
         img_src: base64img.base64Sync('./assets/img/test.png');
       }
```
InformationsquelleAutor Sashi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.