Как отображать картинки во vue?

Question

[stanislavkm]

получаю данные о элементе через Api.
имеется поле thumb:picture.img
блок img в компоненте:

<img :src="('../assets/images/' + item_data.thumb)" alt="Изображение товара">

высвечивается содержимое тэга alt, самого изображения нет.

через require:

<img :src="require('../assets/images/' + item_data.thumb)" alt="Изображение товара">

получаю ошибку: Uncaught (in promise) Error: Cannot find module './undefined'

Comments

[Сергей delphinpro]

Очевидно сборщик не может отрезолвить путь к картинке. Указывайте реальный путь, такой, каким он будет в билде. Ну и саму картинку как-то в билд добавить не забудьте. Если она не резолвится, то и автоматом скопирована не будет.

[Антон Антон]

что выводит

<img :src="require('../assets/images/' + item_data.thumb)" alt="Изображение товара">{{'../assets/images/' + item_data.thumb}}

[stanislavkm]

Антон Антон,

[Vue warn]: Unhandled error during execution of render function 
  at <Item key=undefined item_data= (2) [{…}, {…}]0: {id: 1, thumb: '/plov.jpg', title: 'Тестовое блюдо', price: 100, weight: 280, …}1: {id: 13, thumb: 'plov.jpg', title: 'Торт Наполеон', price: 330, weight: 300, …}length: 2[[Prototype]]: Array(0) onAddToCart=fn<bound addToCart> > 
  at <MealsSection> 
  at <CafeLayout> 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {updateScroll: ƒ, GET_ITEMS_FROM_API: ƒ, …} > > 
  at <RouterView> 
  at <CafeLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {updateScroll: ƒ, modalClick: ƒ, cartClick: ƒ, GET_TITLES_FROM_API: ƒ, GET_ITEMS_FROM_API: ƒ, …} > > 
  at <RouterView> 
  at <AppLayoutDefault> 
  at <AppLayout> 
  at <App>

и

.*$?6a66:16 Uncaught (in promise) Error: Cannot find module './undefined'
    at webpackContextResolve (eval at ./src/assets/images sync recursive ^\.\/.*$ (3.js:150:1), <anonymous>:16:11)
    at webpackContext (eval at ./src/assets/images sync recursive ^\.\/.*$ (3.js:150:1), <anonymous>:11:11)
    at Proxy.render (item.vue?b5c0:3:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:5030:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:167:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5156:1)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4939:1)
    at processComponent (runtime-core.esm-bundler.js?5c40:4897:1)
    at patch (runtime-core.esm-bundler.js?5c40:4489:1)

не может отобразить потому что ключ undefined?

[stanislavkm]

Антон Антон,
все работает довольно странно.
от случая к случаю может прогрузить картинки, а может и нет.