javascript - Handlebars 模板和动态图像

标签 javascript templates handlebars.js

在我的模板中,我正在做类似的事情

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

图像已正确加载,但我收到如下警告:
GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

有没有办法来解决这个问题?

最佳答案

你有两个问题:

  • 您的 <img> 中缺少结束语。但这没什么大不了的。
  • 您的模板存储在一个隐藏的 <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。

    关于javascript - Handlebars 模板和动态图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12531743/

    相关文章:

    handlebars.js - Handlebars.js 的双花括号和三花括号有什么区别

    javascript - jQuery Keithwood日历插件

    webpack - 如何使用 webpack(handlebars-loader) 在 Handlebars 中使用助手

    javascript - 访问客户端 js 文件中的 Handlebars 变量

    c++ - 初始化忽略构造函数模板

    c++ - 具有模板对象的容器类的重载operator []

    c++ - 模板化转换运算符的重载解析

    javascript - 生产环境中的 Browserify.js

    javascript - 仅以特定窗口大小执行功能

    javascript - 使用 oauth2 检索身份验证代码的 Ajax 调用