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

Question

错误信息:模块解析失败: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

Answer 1

已解决:问题是 webpack 只处理小写扩展。对于 Windows .gif == .GIF 但 webpacks 加载器区分大小写。 .png 与 .PNG 的问题相同。我用了正则表达式 强制扩展为小写，附近一切都很好。