Vue3+Vite动态加载图片

最新推荐文章于 2025-06-23 16:52:49 发布

原创最新推荐文章于 2025-06-23 16:52:49 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

定义函数

const requireImg = (imgUrl) => {
    return new URL(imgUrl, import.meta.url).href
}

v-for生成元素

<a-card hoverable v-for="item in cardList" :key="item.title">
    <template #cover>
         <img alt="example" :src="requireImg(item.cover)" class="card-img" />
    </template>
    <a-card-meta :title="item.title">
       <template #description>{{ item.description }}</template>
    </a-card-meta>
</a-card>

cardList值如下

const cardList = ref([
    {
        title: 'Europe Street beat',
        description: 'www.instagram.com',
        cover: '../../assets/img/1.png',
        href: 'https://www.baidu.com'
    },
    {
        title: 'Europe Street beat2',
        description: 'www.instagram.com',
        cover: '../../assets/img/1.png',
        href: 'https://www.baidu.com'
    },
    {
        title: 'Europe Street beat0',
        description: 'www.instagram.com',
        cover: '../../assets/img/1.png',
        href: 'https://www.baidu.com'
    },
])

注意：图片路径要使用相对路径，使用“@”路径别名时，图片出不来