使用Webpack函数生成菜单卡片时图片无法加载的问题求助

你的问题核心出在图片路径的赋值写法上——你把对象属性访问的代码当成字符串塞进了模板里，导致浏览器无法识别正确的图片资源路径。

错误原因 #

这行代码是问题根源：

picture.src = `images['${e.toLowerCase()}.jpg'];`;

你用模板字符串把整个表达式images['honey.jpg'];转换成了字符串，浏览器会尝试请求名为images['honey.jpg'];的无效资源，而不是去访问你导入的images对象里的对应值。手动写images['honey.jpg']能成功，是因为那是直接访问对象属性的正确语法。

修复代码 #

把图片路径的赋值改成正确的对象属性访问方式：

const picture = document.createElement("img");
// 直接访问images对象的属性，无需用模板字符串包裹整个表达式
picture.src = images[`${e.toLowerCase()}.jpg`];
picture.alt = e;

优化建议 #

1. 统一文件名匹配：如果后续有不同后缀的图片（比如png），可以在importAll时统一处理文件名后缀，或者在itemList中存储带后缀的文件名，避免拼接错误。
2. 简化循环逻辑：用forEach代替for循环，代码更简洁直观：

itemList.forEach(item => {
    mainContent.appendChild(cards(item));
});

3. 容错处理：添加判断避免图片不存在时出现404：

const imagePath = images[`${e.toLowerCase()}.jpg`];
if (imagePath) {
    picture.src = imagePath;
} else {
    // 可设置默认图片或提示缺失
    picture.src = images['default.jpg']; // 需提前导入default.jpg
}

修改后的完整代码 #

function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}
  
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

const itemList = ["Honey", "Chocolate", "Matcha", "Coffee"];

function cards(e) {
    const card = document.createElement("div");
    card.classList.add("menu-item");
    const itemName = document.createElement("h2");
    itemName.textContent = e;
    const picture = document.createElement("img");
    // 修复后的图片路径赋值
    picture.src = images[`${e.toLowerCase()}.jpg`];
    picture.alt = e;
    card.appendChild(picture);
    card.appendChild(itemName);
    return card;
}

function menuPage() {
    const mainContent = document.createElement('div');
    mainContent.classList.add("menuContent");
    const header = document.createElement('h1');
    header.classList.add("header");
    header.textContent="Our Menu";
    mainContent.appendChild(header);

    // 用forEach简化循环
    itemList.forEach(item => {
        mainContent.appendChild(cards(item));
    });

    return mainContent;
}

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