Vue JS передать значение элемента массива в атрибут src="" тега

Изучаю Vue. Пытаюсь сделать анимацию поочередного вывода на экран нескольких фото. Что-то не получается. Итак. Вот логика. Картинки в папке images. Компонент vue в папке components. В этом компоненте происходит действие с адресами картинок, которые указаны в массиве. Так как папки images и vue лежат рядом, следовательно для указания пути к картинке нужно выйти на уровень вверх через "../" и указать название папки images. В таком формате адрес четко работает, если его просто вставить в атрибут src. При этом в браузере адрес картинки отображается другой. Вот этот src="../images/DSC_0003.jpg" указан в атрибуте. А вот этот http://localhost:8080/img/DSC_0003.c9f846af.jpg в адресной строке браузера. И он же отображается в консоли разработчика браузера. Однако, если тот же маршрут передавать из массива в атрибут через переменную (:src="image.src"), то и в консоли и в браузере он остается неизменным и картинка не отображается. Если я копирую измененный адрес из браузера и ставлю в массив, все работает четко. Но очевидно это не совсем корректный подход. Точнее, совсем не корректный. В чем фокус?

  <div class="slide_show" id="surce">
      <img v-for="image in show" :key="image.id" :src="image.src" class="all_foto"/> <!--не работает-->
      <!-- <img v-for="image in show" :key="image.id" src="../images/DSC_0021.jpg" class="all_foto"/> работает--> 
  </div>
</template>

<script>
  export default {
                  name: 'Show',
            data(){
              return {
                show: [
                        // {id:1, src:"http://localhost:8080/img/DSC_0003.c9f846af.jpg"},
                        // {id:2, src:'http://localhost:8080/img/21.04.2020-55.565f920f.jpg'},
                        // {id:3, src:'http://localhost:8080/img/DSC_0016.19038039.jpg'},

                        {id:1, src:'../images/DSC_0021.jpg'},
                        {id:2, src:'../images/DSC_0072.jpg'},
                        {id:3, src:'../images/DSC_0294.jpg'},
                        {id:4, src:'../images/DSC_1567.jpg'},
                        {id:5, src:'../images/DSC_0015.jpg'}
                      ]
                    }
                  }
                }
</script>```

Ответы (1 шт):

Автор решения: zeprog

Я не уверен, что я делаю все правильно, но способ с тем, чтобы добавить картинки в папку public, работает отлично. Вот пример https://codesandbox.io/s/compassionate-brown-kpnoi?file=/src/components/HelloWorld.vue:839-855

→ Ссылка