尝试在html模板中显示GIF时抛出错误

时间:2017-06-09 16:25:09

标签: html angularjs error-handling gif

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

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

尝试在md对话框内的md-tabs中显示GIF。 PNG的负载很好。不确定是什么问题。

template.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

1 个答案:

答案 0 :(得分:1)

已解决:问题是webpack仅处理小写扩展。对于Windows .gif == .GIF ,但webpacks加载程序区分大小写。与 .png vs .PNG 相同的问题。我使用了正则表达式来强制扩展为小写,并且附近的所有内容都很好。