Vue.js初学者求助：如何从assets文件夹获取轮播图图片？

Hey there! Let's troubleshoot why your carousel images aren't showing up. I've gone through your code and noticed a couple of key issues that are likely causing the problem—let's fix them step by step.

1. 修复setup函数的返回值问题 #

Your current setup function returns the carouselSlide array directly, but Vue expects setup to return an object where the keys are the variables you want to use in the template. Right now, the template can't properly access the carouselSlide array because it's not exposed correctly.

Here's the corrected setup code:

<script>
import Carousel from "../utility-components/Carousel.vue";
import Slide from "../utility-components/Slide.vue";
// 如果需要响应式（后续可能修改轮播项的话），可以导入ref
// import { ref } from 'vue';

export default {
  setup() {
    const carouselSlide = ["bg-1", "bg-2", "bg-3"];
    // 用对象返回，让模板能访问到carouselSlide变量
    return { carouselSlide };

    // 如果需要响应式支持（比如动态添加/删除轮播项），改成这样：
    // const carouselSlide = ref(["bg-1", "bg-2", "bg-3"]);
    // return { carouselSlide };
  },
  components: {
    Carousel,
    Slide
  },
};
</script>

2. 确保图片路径正确且文件存在 #

Your require path uses ../assets/, but this relative path depends on where your current component file is located. A more reliable way is to use Vue CLI's built-in alias @ (which points directly to the src folder), so you don't have to worry about relative directory levels.

Update the img tag's src like this:

<img :src="require(`@/assets/${slide}.jpg`)" />

Also double-check these details:

• Make sure the images bg-1.jpg, bg-2.jpg, bg-3.jpg actually exist in the src/assets folder.
• Filenames are case-sensitive on Linux/macOS (and some hosting environments), so ensure the case matches exactly (e.g., BG-1.jpg won't work if your file is bg-1.jpg).

3. 替代方案：直接导入图片 #

If you still run into issues with require, you can import the images directly in your script—this avoids path resolution headaches entirely:

<template>
  <div class="container">
    <div class="title">Projects</div>
    <Carousel class="carousel">
      <Slide v-for="(slide, index) in carouselSlide" :key="index">
        <div class="slide-info">
          <img :src="slide" />
        </div>
      </Slide>
    </Carousel>
  </div>
</template>

<script>
import Carousel from "../utility-components/Carousel.vue";
import Slide from "../utility-components/Slide.vue";
// 直接导入图片
import bg1 from '@/assets/bg-1.jpg';
import bg2 from '@/assets/bg-2.jpg';
import bg3 from '@/assets/bg-3.jpg';

export default {
  setup() {
    const carouselSlide = [bg1, bg2, bg3];
    return { carouselSlide };
  },
  components: {
    Carousel,
    Slide
  },
};
</script>

Try these fixes one by one—most likely the setup return value issue is the main culprit, followed by path resolution. Let me know if you still have trouble after trying these!

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