kondrackii
@kondrackii
1 + 1 = 2

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

Например, если просто написать строкой путь до изображения (~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 эти изображения не войдут (+ они еще и их названия хэшироваться должны).
Заранее, спасибо.
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
tomgif
@tomgif
Веб-разработчик
data: () => ({
    array: [
      { ..., image: require('assets/my_image1.jpg') },
      { ..., image: require('assets/my_image2.jpg') },
      { ..., image: require('assets/my_image3.jpg') }
  })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы