Vue.js模板中的静态图像src [英] Static image src in Vue.js template

问题描述

我的Vue组件包含一些图像。我想稍后进行延迟加载，所以我需要先将图像的src设置为小图像。

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.

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

给我一​​些错误，例如：

Gives me a bunch of errors, like:

[Vue警告]：表达式无效。生成函数
body：/scope.static/scope.img/scope.clear.gif vue.common.js：1014 [Vue

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

[Vue warn] ：评估表达式/static/img/clear.gif时出错：
TypeError：无法读取未定义的属性'call'（在
组件中找到:)

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

webpack.config.js：
module.exports = {
// ...
build：{
assetsPublicPath： '/'，
assetsSubDirectory：'static'
}
}

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

推荐答案

如果你想要将字符串绑定到 src 属性，您应该将其包装在单引号上：

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你不需要绑定一个字符串，你可以用简单的方法：

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

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

在此处查看有关图像预加载的示例： http://codepen.io/pespantelis/pen/RWVZxL

Check an example about the image preload here: http://codepen.io/pespantelis/pen/RWVZxL

这篇关于Vue.js模板中的静态图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！