vue3-carousel本地图片无法显示求助：仅显示路径文本

你的问题核心是两个错误导致的：没有用图片标签渲染资源，以及public目录下的路径写法不对，按下面两步修改即可解决：

1. 替换文本输出为图片标签 #

你现在只是把图片路径当成纯文本展示了，必须用<img>标签才能加载图片。把模板里的<p>{{ slide.src}}</p>替换成：

<img :src="slide.src" :alt="slide.title" />

2. 修正public目录下的图片路径 #

Vue项目中，public是静态资源的根目录，打包后里面的文件会直接放在项目根路径下，不需要写相对路径../../public/，直接用根路径开头的格式就行。修改slides数组里的src字段：

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

修改后的完整代码 #

<template>
  <div class="container">
    <div class="fish_item">
      <Carousel :wrap-around="true" :breakpoints="breakpoints" :autoplay="3000">
        <Slide v-for="slide in slides" :key="slide.id">
          <div class="carousel__item">
            <h3>{{ slide.title }}</h3>
            <p>{{ slide.content }}</p>
            <!-- 替换为img标签 -->
            <img :src="slide.src" :alt="slide.title" />
          </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'

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

补充说明 #

如果你的图片是放在src/assets目录下的，需要用require()或者import引入，比如：

src: require('@/assets/images/map1.jpg')

但你当前用的是public目录，用前面的根路径写法就足够了。

内容的提问来源于stack exchange，提问作者bxeom