Vue.js Buefy carousel组件添加本地图片不生效问题咨询

问题原因 #

你的代码有两处核心问题：

• b-image组件用法错误：这个组件和原生<img>标签逻辑一致，图片地址必须绑定到src属性上，你把路径直接写在标签中间，只会被解析成普通文本，根本不会发起图片资源请求，自然渲染不出来。
• 构建工具语法不兼容：如果项目用Vite搭建，本身不支持CommonJS的require()语法引入本地资源，会直接导致路径解析失败。

修复方案 #

基于Webpack的Vue CLI项目 #

只需要修正b-image的属性绑定即可，不需要改script部分的引入逻辑：

<template>
    <b-carousel>
        <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
            <section class="hero is-medium">
                <div class="hero-body has-text-centered">
                    <!-- 核心修改：绑定src属性，不要把路径写在标签内部 -->
                    <b-image :src="carousel.image" :alt="carousel.title" />
                </div>
            </section>
        </b-carousel-item>
    </b-carousel>
</template>

<script>
export default {
    data(){
        return {
            carousels: [
                {
                    title: 'Slide 1',
                    image: require("@/assets/img1.png")
                },
                {
                    title: 'Slide 2',
                    image: require("@/assets/img2.png")
                },
                {
                    title: 'Slide 3',
                    image: require("@/assets/img3.png")
                }
            ]
        }
    }
}
</script>

基于Vite的项目 #

需要替换掉require的资源引入写法，二选一即可：

• 方式1：顶部统一引入图片资源

<script>
import img1 from '@/assets/img1.png'
import img2 from '@/assets/img2.png'
import img3 from '@/assets/img3.png'
export default {
    data(){
        return {
            carousels: [
                {title: 'Slide 1', image: img1},
                {title: 'Slide 2', image: img2},
                {title: 'Slide 3', image: img3}
            ]
        }
    }
}
</script>

• 方式2：用Vite原生支持的URL构造方法写在data内

carousels: [
    {
        title: 'Slide 1',
        image: new URL('@/assets/img1.png', import.meta.url).href
    },
    {
        title: 'Slide 2',
        image: new URL('@/assets/img2.png', import.meta.url).href
    },
    {
        title: 'Slide 3',
        image: new URL('@/assets/img3.png', import.meta.url).href
    }
]

补充提示 #

如果不需要b-image提供的懒加载、占位图、响应式适配这些额外能力，直接用原生<img>标签绑定src属性也能正常渲染图片，基础渲染逻辑和b-image完全一致。

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