我的 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]: 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'
}
}
最佳答案
此解决方案适用于 Vue-2 用户:
- 在
vue-2
中,如果您不想将文件保存在static
文件夹中 ( relevant info ),或者 - 在
vue-2
和vue-cli-3
中,如果您不想将文件保存在public
文件夹中(static
文件夹重命名为public
):
简单的解决方案是:)
<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}
如果您想将静态图片保存在 static/assets/img
或 public/assets/img
文件夹中,那么只需执行以下操作:
<img src="./assets/img/clear.gif" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./
关于javascript - Vue.js 模板中的静态图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37645243/