Как сделать, чтобы :src="user.photo" работало?

Question

[nurdus]

Добрый день.
В vuetify, есть компонента v-img, если писать src="../assets/0.jpg", то всё работает, если :src="user.photo", то нет, хотя значение одно и тоже. Подскажите, плиз, как обойти проблему? Заранее спасибо.

Comments

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

хотя значение одно и тоже

146%?

Answer 1

[Олег Колтунов]

Попробуйте так :src="require(`@/assets/${user.photo}`)"

Comments

[nurdus]

Смогу попробовать вечером, спасибо. :)

Answer 2

[Sergey Mukhin]

хотя значение одно и тоже

Не одно и тоже. Смотря что ты хочешь, включить в сборку или сослаться на стороннее изображение.

В первом случаи файл подхватывает сборщик.
Во втором получишь строку как есть (открой исходный код результата, посмотри).

:src="user.photo" нужно использовать, если у тебя например изображения на API сервере.

Answer 3

[Александр]

я только учусь )))
в туже степь что и Sergey Mukhin
Одно дело статичный файл
1.

Image: '/static/images/logo.png'
<img :src="Image">

"чистый" статик
2.

Image: require('/assets/images/logo.png')
<img :src="Image">

"вычисляемый", но все равно статик. dev и build соберут картинки в одном месте и добавят уникальный хэш в имени.
А другое дело вычисляемый "путь":
Боюсь придется придумывать инициализацию user.photo:
если их мало заранее присвойте переменным photoNNN через require. А потом вычисляйте user.photo передав объект photoNNN.

Comments

[Александр]

Или в инициализации сразу писать

User: {
  id: 1,
  name: 'Vasya',
  Photo: require('/assets/images/user1.jpg'),
}

И делать фильтр по id.