javascript - 动态图像导入

Question

所以我有一个组件，我需要使用特定图像，其中有超过 28 个选项，所以我编写了 2 个函数，它们看起来像这样，来动态导入图像:

    loadAvatar = imageName => {
        // Imports Avatar image file and returns it
        import(`../../../img/avatars/${imageName}.svg`).then(image => {
            return image;
        });
    };

    getAvatarIcon(icon, color) {
        // Uses Avatar icon and color defined in endpoint response to return proper file name
        var avatarFileName = "Avatar_" + icon + "_" + color;
        return this.loadAvatar(avatarFileName);
    }

我尝试用这个来调用它

<img src={() => this.getAvatarIcon(icon, color)} alt={name} className="avatar" />

但是，这不起作用，我该如何解决这个问题？

Answer 1

试试这个:

<img src={this.getAvatarIcon(icon, color)} alt={name} className="avatar" />

将您的 loadAvatar 函数编辑为:

loadAvatar = imageName => import(`../../../img/avatars/${imageName}.svg`);

并将 getAvatarIcon 编辑为:

async getAvatarIcon(icon, color) {
    // Uses Avatar icon and color defined in endpoint response to return proper file name
    var avatarFileName = "Avatar_" + icon + "_" + color;
    return await this.loadAvatar(avatarFileName);
}