[解決済み] Vue.jsのテンプレートで静止画像のsrcを指定する

質問

私のVueコンポーネントは、いくつかの画像を含んでいます。私は後で遅延ロードを行いたいので、まず、画像のsrcを小さな画像に設定する必要があります。

<template>
        <div v-for="item in portfolioItems">
            <a href="#{{ item.id }}">
                <img
                    data-original="{{ item.img }}"
                    v-bind:src="/static/img/clear.gif"
                    class="lazy" alt="">
            </a>
        </div>
</template>

みたいなエラーを連発する。

[Vue warn]: 無効な式です。生成された関数 の本体です。 /scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue

[Vue warn]: 式 "/static/img/clear.gif" を評価する際にエラーが発生しました。 TypeError: 未定義のプロパティ 'call' を読み取ることができません (次の場所で見つかりました) コンポーネント: )

webpack.config.js:
module.exports = {
    // ...
    build: {
        assetsPublicPath: '/',
        assetsSubDirectory: 'static'
    }
}

解決方法は？

に文字列をバインドしたい場合 src 属性はシングルクォートで囲む必要があります。

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMOでは、文字列をバインドする必要がないので、簡単な方法を使用することができます。

<img src="/static/img/clear.gif">

画像のプリロードについては、こちらの例をご覧ください。 http://codepen.io/pespantelis/pen/RWVZxL