The vue3-carousel image doesn't appear-CodePudding

I installed vue3-carousel by npm and I want to show the imgs in the folder internal path, not the external path, but only the src path is displayed as text, and the image is not displayed. how can I display img's?

<template>
  <div >
    <div >
      <Carousel :wrap-around="true" :breakpoints="breakpoints" :autoplay="3000">
        <Slide v-for="slide in slides" :key="slide.id">
          <div >
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.content }}</p>
            <p>{{ slide.src}}</p>
          </div>
        </Slide>
        <template #addons>
          <Navigation />
          <Pagination />
        </template>
      </Carousel>
    </div>
  </div>
</template>
<script setup>
import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

const slides = [
  { id: 1, title: 'Vue 3 Introduction', content: 'VueJS is a library' , src: '../../public/images/map1.jpg'},
  { id: 2, title: 'Vue 3 Components', content: 'Know the components' , src: '../../public/images/map2.jpg'},
  { id: 3, title: 'Vue 3 Components', content: 'Know the components' , src: '../../public/images/map3.jpg'},
  { id: 4, title: 'Vue 3 Components', content: 'Know the components' , src: '../../public/images/map4.jpg'},
  { id: 5, title: 'Vue 3 Components', content: 'Know the components' , src: '../../public/images/map5.jpg'},
]
</script>

CodePudding user response：

If you will use p tag to display the image then obviously a text would be displayed not an image. So, use img tag to display the images.
If files are in the public folder then you don't need to give ../../public/images path. You can directly access it via /images/<img_name>

After making those two changes, your images will be displayed correctly. Here is the fixes you need to do-

Update your slides data to this-

const slides = [
  { id: 1, title: 'Vue 3 Introduction', content: 'VueJS is a library' , src: 'map1.jpg'},
  { id: 2, title: 'Vue 3 Components', content: 'Know the components' , src: 'map2.jpg'},
  { id: 3, title: 'Vue 3 Components', content: 'Know the components' , src: 'map3.jpg'},
  { id: 4, title: 'Vue 3 Components', content: 'Know the components' , src: 'map4.jpg'},
  { id: 5, title: 'Vue 3 Components', content: 'Know the components' , src: 'map5.jpg'},
]

and update your Carousel component to this-

<Carousel :wrap-around="true" :breakpoints="breakpoints" :autoplay="3000">
  <Slide v-for="slide in slides" :key="slide.id">
    <div >
      <h3>{{ slide.title }}</h3>
      <p>{{ slide.content }}</p>
      <img :src="`/images/${slide.src}`" />
    </div>
  </Slide>
  <template #addons>
    <Navigation />
    <Pagination />
  </template>
</Carousel>