Статическое изображение src в шаблоне Vue.js

Компонент Vue содержит некоторые изображения. Я хочу сделать lazy-load позже, поэтому мне нужно сначала установить 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: Невозможно прочитать свойство "вызов" неопределенного (найдено в компоненте:)

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

Ответ 1

Если вы хотите привязать строку к атрибуту 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

Ответ 2

@Pantelis ответ каким-то образом направил меня к решению для аналогичного недоразумения. Проект доски объявлений, над которым я работаю, должен показать необязательный образ. У меня были подгонки, пытаясь заставить файл src= image конкатенировать фиксированный путь и строку имени файла переменной до тех пор, пока я не увидел причудливое использование "'" quotes :-)

<template id="symp-tmpl">
  <div>
    <div v-for="item in items" style="clear: both;">
      <div v-if="(item.imagefile !== '[none]')">
        <img v-bind:src="'/storage/userimages/' + item.imagefile">
      </div>
      sub: <span>@{{ item.subject }}</span>
      <span v-if="(login == item.author)">[edit]</span>
      <br>@{{ item.author }}
      <br>msg: <span>@{{ item.message }}</span>
    </div>
  </div>
</template>

Ответ 3

Это решение для пользователей Vue-2:

В vue-2 если вы не хотите хранить файлы в static папке (соответствующая информация) или
В 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" />

Ответ 4

Вот как я его решаю.

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

Смотрите здесь в действии