Заглушка на отсутствующее изображение Vue.js?

Question

[TerNik]

Доброго времени суток!

Проект создан vue-cli.
Содержимое ячеек таблицы зависит от поступающих данных, присутствуют изображения.
Если изображение отсутствует, случается ошибка рендеринга, компонент (строка таблицы) не отображается. Соответственно, хочется произвести проверку на наличие изображения, если изображение отсутствует, как-то это отобразить.
Я пробовал вот так вот:
<td v-html="showType(rowData.type)"></td>

showType (type) {
    let path = `@/assets/img/icon/${type}-type-icon.png`
    return `<img src="${getImg(path)}" />`
}

function getImg (path) {
  let result
  try {
    result = require(path)
  } catch (e) {
    if (e.code !== 'MODULE_NOT_FOUND') {
      throw e
    }
    result = require('@/assets/img/icon/error-load.png')
  }
  return result
}

При этом блок try не выполняется, всюду заглушка.
Но если написать в блоке try
result = require(@/assets/img/icon/some-icon.png)
то блок try без ошибок исполняется.
Видимо, как-то неправильно передается path?

Вопросы:
1. Что я делаю не так?
2. Может быть есть более правильный способ?

Спасибо!

Answer 1

[Алексей Ярков]

Или так. В main.js в конце пишем

window.fallbackImage = require('./components/img/fallback.png')

Используем так

<img :src="avatar" onerror="this.onerror=null;this.src=window.fallbackImage">

Answer 2

[TerNik]

Проблему удалось решить, вдруг кому пригодится.
Дело вот в чем: webpack не умеет корректно работать с
require(path)
Ему обязательно нужна конкретика, как именно начинается путь
require('@/begin/of/path' + endOfPath)
Соответственно, переписал функцию получения картинки и передаю в нее не полный путь, а только путь от папки изображений:

function getImg (path) {
  let result
  try {
    result = require('@/assets/img/' + path)
  } catch (e) {
    if (e.code !== 'MODULE_NOT_FOUND') {
      throw e
    }
    result = require('@/assets/img/icon/error-load.png')
  }
  return result
}

Answer 3

[Artem0071]

Чет жуть какая то у вас

Сделайте приблизительно так:
<img :src="path?path:null" />

Либо создайте какое то изображение и суйте его вместо null

ps увидел что что то у вас есть, так что можно как то так:

<img :src="path?path:'@/assets/img/icon/error-load.png'" />

Ну или подравняйте там пути

Comments

[TerNik]

Я не очень понимаю, это вы предлагаете написать прямо в шаблоне? Если да, то, к сожалению, не получится, так как содержимое ячейки (шаблон) зависит от данных. Поэтому и потребовалось вставлять кусок html посредством v-html.
Если же в функции, генерирующей html (у меня это showType), написать так, как вы предлагаете, то путь подставится, но изображение не загрузится - webpack не обработает корректно. Если смотреть исходный код, будет
<img :src="@/assets/img/icon/some-type-icon.png">
вместо
<img src="data:image/png;base64,iVBORw0K...">
Поэтому и появляется require(path), и как итог - жуть какая-то, которая вдобавок и не работает =)

Может быть есть мысли, как это реализовать иначе?

[Artem0071]

Ну и в чем проблема?
У Вас в шаблоне так и бедет:

<td>
    <img :src="path?path:'@/assets/img/icon/error-load.png'" />
</td>

А путь нужно смотреть на основе устройства ваших папок