尝试在 html 模板中显示 GIF 时引发错误答案

【问题标题】：Error thrown when trying to display GIF in html template尝试在 html 模板中显示 GIF 时引发错误
【发布时间】：2017-11-11 18:08:59
【问题描述】：

错误消息： 模块解析失败：C:\src\imgs\giphy.gif 意外字符 '�' (1:6)

您可能需要适当的加载程序来处理此文件类型。 SyntaxError: 意外字符 '�' (1:6)

试图在 md-dialog 内的 md-tabs 内显示 GIF。 PNG的加载很好。不知道是什么问题。

模板.html：

<md-tabs md-dynamic-height md-border-bottom md-swipe-content md-align-tabs="bottom" md-center-tabs class="feature-tabs" md-no-ink-bar>

            <md-tab label="1">
                <!--<md-tab-label>
                    <md-icon md-svg-src="../../../imgs/format-icon-audio.svg"></md-icon>
                </md-tab-label>-->
                <md-content class="md-padding">
                <h1 class="md-display-2">Tab One</h1>
                <p> More intuitive. More responsive. </p>
                <img src="../../../imgs/giphy.gif">
                <!--<img src='../../../../app/images/mini-balls2.gif'>-->
                <!--<img src="../../../imgs/logo@2x.png" alt="Splash Gif" style="width:400px;height:127px;">-->
                </md-content>
            </md-tab>

webpack-common.config.js:

{
    test: /.(gif|png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
    // https://github.com/webpack/loader-utils
    loader: 'url-loader?limit=10000&name=./assets/[name].[hash:6].[ext]'
}

ERROR SCREEN CAPTURE WHEN BUILT

【问题讨论】：

您检查过您的 GIF 没有损坏吗？例如，通过在图像编辑器中打开它。
@R.Saban 是的，我用十六进制编辑器打开了它。使用 wikipedias 文件格式描述符作为指南，并且标头匹配。 (hex) value 含义 0: 47 49 46 38 39 61 GIF89a Header
我还尝试为标签提供更多信息，例如“alt = ...”以及与 gif 匹配的宽度和高度属性；还是没有运气
我为参考添加了错误截图。
我在路径中看到'../../../'，你有没有检查过你没有混淆本地路径和 web_root 路径？

标签： html angularjs error-handling gif

【解决方案1】：

已解决：问题是 webpack 只处理小写扩展。对于 Windows .gif == .GIF 但 webpacks 加载器区分大小写。 .png 与 .PNG 的问题相同。我使用 Regex 将扩展名强制为小写，并且在附近一切都很好。

【讨论】：