Я хотел бы сделать v-for l oop на изображении с Vue. js

Question

Я хотел бы создать колокольчик с помощью v-for, но прежде чем я хотел бы убедиться, что мои изображения отображаются, но когда я монтирую свой код, моя консоль заставляет меня понять, что мое изображение не найдено.

рендеринг моего шаблона

<template>
    <article>
       <h3>{{ titre }}</h3>
       <img :src="`./../images/${source}`" :[attributeClass]="classe"  alt="image site">
       <p class="mt-4 lead">{{ texte }} </p>
       <a :[attributeName]="liens" target="blank" class="btn btn-primary">Voir le site</a>
     </article>
</template>

Мой скрипт

export default {
    data(){
      return  {
         attributeName: 'href',
         attributeClass: 'class',
         classe: 'img-fluid w-50 shadow border rounded-lg border-secondary',
         source: 'germain.png',
         titre: 'Premiére Version',
         texte: 'C'était la première version de mon site, dans les balbutiements',
         liens: 'https://alain-germain.fr/'    
       }
     }
}

Я ищу по всему плакату, но не передаю, мое изображение таким образом убирается "assets / images / image.png». Я работаю с symfony.

Answer 1

У вас есть два варианта:

a) использовать require() ( Импорт относительных путей )

Вам необходимо использовать require('../images/some-image.jpg') во время компиляции. Это добавит ресурс в пакет и заменит '../images/some-image.jpg' на правильную ссылку на связанный ресурс.

Чтобы отобразить набор относительных путей, нужно поместить их в data и отобразить требование вызовите каждый из них: то есть:

data: () => ({
  images: [...your image paths].map(i => require(i))
})

this.images теперь содержит правильные URL-адреса для связанных ресурсов. Если вам нужно сослаться на них, вы можете превратить их в объекты с уникальными идентификаторами.

---

b) использовать /public folder ( Publi c folder )

Другой, более простой вариант - создать папку /public в вашем приложении. Webpack автоматически добавит все файлы в нем.

/public передается в /. Так что /public/test.jpg будет использоваться как
<img src="<%= BASE_URL %>test.jpg">