Как подцепить картинки из assets в v-for?

Question

[Артем Кондрацкий]

Например, если просто написать строкой путь до изображения (~assets/images/my_image.jpg), то при сборке путь будет примерно такой - /_nuxt/assets/images/my_image.jpg (на проде оно хэшируется)

пример

в компоненте/странице:

<template>
  ...
  <img src="~assets/images/my_image.jpg" />
  ...
</template>
...

после build'а на странице:

...
  <img src="/_nuxt/images/my_image.jpg" />
...

А если сделать v-for, то при build'е путь так и остается просто строкой, оно и понятно, но как сделать так, чтобы путь до assets подхватывался

Пример с v-for

в компоненте/странице:

<template>
  ...
  <div v-for="(i, item) in array" :key="i">
    ...
    <img :src="item.image" />
  </div>
  ...
</template>

<script>
  data: () => ({
    array: [
      { ..., image: '~assets/my_image1.jpg' },
      { ..., image: '~assets/my_image2.jpg' },
      { ..., image: '~assets/my_image3.jpg' }
  })
</script>

после build'а на странице:

...
<div>
  ...
  <img src="~assets/my_image1.jpg" />
</div>
<div>
  ...
  <img src="~assets/my_image2.jpg" />
</div>
<div>
  ...
  <img src="~assets/my_image3.jpg" />
</div>

На первый взгляд, просто поставь /_nuxt/ вместо ~ и все, но оно же при build на production эти изображения не войдут (+ они еще и их названия хэшироваться должны).
Заранее, спасибо.

Answer 1

[Роман Ямчук]

data: () => ({
    array: [
      { ..., image: require('assets/my_image1.jpg') },
      { ..., image: require('assets/my_image2.jpg') },
      { ..., image: require('assets/my_image3.jpg') }
  })

Comments

[Артем Кондрацкий]

тля, совсем забыл про require! пасиб)