Vue.js 模板中的静态图片 src

Question

我的 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 警告]：无效的表达式。生成的函数体：/scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue

[Vue 警告]：评估表达式“/static/img/clear.gif”时出错：TypeError：无法读取未定义的属性“调用”（在组件中找到：）

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

原文由 reggie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要将字符串绑定到 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

原文由 Pantelis Peslis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此解决方案适用于 Vue-2 用户：

1. 在 vue-2 如果您不喜欢将文件保存在 static 文件夹中（ 相关信息），或者
2. 在 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 ./

原文由 Syed 发布，翻译遵循 CC BY-SA 4.0 许可协议