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

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

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

Answer 1

我就是这样解决的。：

      items: [
        { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
        { title: 'Projects',  icon: require('@/assets/icons/sidebar/projects.svg') },
        { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
      ],

在模板部分：

<img :src="item.icon" />

在这里看到它的行动

Answer 2

如果您想将字符串绑定到src属性，您应该用单引号包装它：

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

如果不需要绑定字符串，可以使用以下简单方法：

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

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

Answer 3

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

1. 在vue-2中，如果您不想将文件保存在static文件夹（相关信息）中，或
2. 在vue-2中

简单的解决方案是：）

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