Guidon des gabarits et des images dynamiques

Dans mes modèles, je suis en train de faire quelque chose comme

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

Les images sont chargées correctement, mais je reçois des avertissements du genre:

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

Est-il un moyen de résoudre ce problème?

Est le modèle annexé à la page avant d'être analysé par votre moteur de template? Si oui, je ne vois pas de solution de contournement.
Je ne le crois pas. Je fais un appel ajax qui s'agrippe à mon externes guidon modèles. Je cache ces modèles et, plus tard, j'ai une fonction qui prend les données json et trouve le bon modèle à utiliser comme source et ensuite je compile le source et de transmettre les données json à ce modèle compilé. Est-il quelque chose à propos de cette méthode qui serait la cause de ces mises en garde?
C'est bizarre alors. Eh bien, lorsque vous créez un élément de l'image à la source, le navigateur va faire une demande pour essayer de mettre en cache déjà. Si le modèle est analysé comme une chaîne de caractères puis analysé dans le DOM éléments qui ne devrait pas arriver. Mais de toute façon, vous pouvez ignorer ce genre de mise en garde, c'est juste pour vous informer qu'un fichier demandé n'a pas été trouvé (c'est juste avant de swap de la source et qu'il charge de nouveau), les utilisateurs finaux n'ont pas de consoles ouvertes lors de la navigation sur votre site. =]

OriginalL'auteur swallace | 2012-09-21

  1. 12

    Vous avez deux problèmes:

    1. Il vous manque un guillemet de fermeture dans votre <img> mais ce n'est pas une grosse affaire.
    2. Votre modèle est stocké dans un caché <div> ou un élément similaire qui contient le code HTML.

    Si vous dire ceci:

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

    le navigateur va interpréter le <img> comme une image réelle et essayez de charger la ressource spécifiée dans la src attribut, c'est là votre erreur 404:

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

    vient de. Les modèles sont rarement valide et correctement formé HTML si vous avez besoin de garder le navigateur d'essayer d'interpréter le modèle en tant que HTML. L'approche habituelle consiste à stocker le modèle dans un <script> avec un non-HTML type:

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

    Alors vous pouvez dire Handlebars.compile($('#t').html()) pour obtenir votre modèle compilé et le navigateur n'est pas de tenter d'interpréter le #t contenu HTML.

    Grâce à ce fixe mon avertissement.

    OriginalL'auteur mu is too short

  2. 3

    Je sais qu'il est tard, mais ici, c'est comment faire ce que vous voulez :

    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>

    OriginalL'auteur Benjamin L.

  3. 0

    J'ai trouvé que l'utilisation de triple crochets fonctionnent bien. 

    <img src="{{{your source}}}" alt={{{your alt}}} />
    La question a été posée en 2012, plus de 5 ans. Êtes-vous sûr que cette nouvelle réponse est applicable à la version 2012 de handebars.js?

    OriginalL'auteur Kyriediculous

  4. 0

    Aucune réponse n'a fonctionné pour moi. Je l'ai eu à travailler par la conversion de l'image en base64 et l'envoi de ce que l'img src à l'intérieur du guidon modèle

    modèle.hbs

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

    source.js

    data = {
         img_src: base64img.base64Sync('./assets/img/test.png');
       }

    OriginalL'auteur Sashi