Vue.js 模板中的静态图片 src [英] Static image src in Vue.js template
问题描述
我的 Vue 组件包含一些图像.以后想做懒加载，先把图片的src设置成小图片.
<div v-for="portfolioItems 中的项目"><a href="#{{ item.id }}"><imgdata-original="{{ item.img }}"v-bind:src="/static/img/clear.gif"class="懒惰" alt=""></a>给我一堆错误，比如:
<块引用>[Vue 警告]:表达式无效.生成函数正文:/scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue
[Vue 警告]:评估表达式/static/img/clear.gif"时出错:类型错误:无法读取未定义的属性调用"(在组件:)
webpack.config.js:模块.出口 = {//...建造: {资产公共路径:'/'，资产子目录:'静态'}}如果你想将一个字符串绑定到 src 属性，你应该把它用单引号括起来:
<!-- 或简写--><img :src="'/static/img/clear.gif'">IMO 你不需要绑定字符串，你可以使用简单的方法:
在此处查看有关图像预加载的示例:http://codepen.io/pespantelis/pen/RWVZxL
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 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: )
webpack.config.js:
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: http://codepen.io/pespantelis/pen/RWVZxL
这篇关于Vue.js 模板中的静态图片 src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
