Vue動態綁定圖片路徑時不會顯示

問題：

在使用固定圖片路徑時，圖片顯示正常，但動態綁定圖片路徑時不會顯示

解決方法：

使用require動態加載

<template>
        <!--      帳號信息-->
        <el-card class="box-card" style="height: 255px">
            <div class="user">
                <img :src=imgPath alt="">
                <div class="userinfo">
                    <p class="name">{{employee.name}}</p>
                    <p class="access">超级管理员</p>
                </div>
            </div>
            <div class="login-info">
                <p>上次登錄時間：<span>{{lastLoginTime}}</span></p>
            </div>
        </el-card>
</template>
<script>
export default {
    created() {
    //動態獲取帳號圖像
    this.username = localStorage.getItem('username');
    this.imgPath = require(`@/assets/images/${this.username}.png`);
    },
}   
</script>

---

轉載請注明來源，歡迎對文章中的引用來源進行考證，歡迎指出任何有錯誤或不夠清晰的表達。可以郵件至 b8954008@gmail.com