Static image src in Vue.js template

My Vue component contains some images. I want to do lazy-loading later, so I need to set the src of the images to a small image, first.

        <div v-for="item in portfolioItems">
            <a href="#{{ }}">
                    data-original="{{ item.img }}"
                    class="lazy" alt="">

Gives me a bunch of errors, like:

[Vue warn]: Invalid expression. Generated function body: /scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue

[Vue warn]: Error when evaluating expression “/static/img/clear.gif”: TypeError: Cannot read property ‘call’ of undefined (found in component: )

module.exports = {
    // ...
    build: {
        assetsPublicPath: '/',
        assetsSubDirectory: 'static'


If you want to bind a string to the src attribute, you should wrap it on single quotes:

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

IMO you do not need to bind a string, you could use the simple way:

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

Check an example about the image preload here:

Leave a Reply

Your email address will not be published. Required fields are marked *