前端无法显示MySQL获取的图片问题技术求助

问题根源 #

你当前的图片无法加载，核心原因是后端返回的图片是Buffer对象，转成JSON后变成了包含data数组的结构；而前端直接将这个数组赋值给img的innerHTML，这完全不符合浏览器加载图片的要求——图片需要的是可识别的数据源，比如Base64编码字符串或者图片URL。

修复方案 #

后端修改：将图片Buffer转为Base64字符串 #

在Node.js中读取图片后，把Buffer转换成带MIME类型前缀的Base64字符串，这样浏览器才能正确解析。同时注意：GET请求不能通过req.body获取参数，需改用req.query。

const fs = require('fs');
const path = require('path'); // 引入path模块获取文件扩展名

class Admin {
    async readImagePath(filePath) {
        return new Promise((resolve, reject) => {
            // 根据文件扩展名确定MIME类型
            const ext = path.extname(filePath).toLowerCase();
            let mimeType = '';
            switch(ext) {
                case '.jpg':
                case '.jpeg':
                    mimeType = 'image/jpeg';
                    break;
                case '.png':
                    mimeType = 'image/png';
                    break;
                case '.gif':
                    mimeType = 'image/gif';
                    break;
                default:
                    mimeType = 'image/jpeg'; // 默认类型
            }

            // 读取图片文件
            fs.readFile(filePath, (err, data) => {
                if (err) {
                    reject(err);
                } else {
                    // 将Buffer转为Base64字符串并添加MIME前缀
                    const base64Image = `data:${mimeType};base64,${data.toString('base64')}`;
                    resolve(base64Image);
                }
            });
        });
    }
}

app.get("/browseProduct", async (req, res) => {
    try {
        let admin = new Admin();
        // GET请求通过req.query获取参数
        let orderBy = req.query.orderBy;
        let chefID = req.query.chefID;

        // 获取数据库返回的产品数据
        let browseProductResult = await admin.browseChefProduct(orderBy, chefID);

        // 为每个产品替换为Base64格式的图片
        for (let i = 0; i < browseProductResult.length; i++) {
            let filePath = browseProductResult[i].productPhotoPath;
            browseProductResult[i].image = await admin.readImagePath(filePath);
        }
        res.status(200).json({browseProductResult});
    }
    catch (err) {
        console.log(err);
        res.status(400).json({
            message: "خطأ غير معروف الرجاء التواصل مع الدعم الفني للابلاغ عن المشكلة 779593216",
        });
    }
});

前端修改：使用Base64字符串作为img的src #

前端不再赋值innerHTML，而是直接将Base64字符串赋值给img元素的src属性，同时简化数据处理逻辑：

// 存储服务器返回的产品数据
let products;

// 创建卡片的函数
function createCardInHtml(image, name, ID, price, description, rate) {
    // 创建最外层div
    const productsDiv = document.createElement('div');
    productsDiv.classList.add('products');

    // 创建main容器
    const mainDiv = document.createElement('div');
    mainDiv.classList.add('main');

    // 创建卡片列表
    const ulElement = document.createElement('ul');
    ulElement.classList.add('cards');

    // 创建列表项
    const liElement = document.createElement('li');
    liElement.classList.add('cards_item');

    // 创建卡片容器
    const cardDiv = document.createElement('div');
    cardDiv.classList.add('card');

    // 创建图片容器和图片元素
    const cardImageDiv = document.createElement('div');
    cardImageDiv.classList.add('card_image');
    const imageElement = document.createElement('img');
    imageElement.src = image; // 直接赋值Base64字符串给src
    imageElement.alt = '产品图片';
    cardImageDiv.appendChild(imageElement);

    // 创建卡片内容区域
    const cardContentDiv = document.createElement('div');
    cardContentDiv.classList.add('card_content');

    // 产品名称
    const productNameHeading = document.createElement('h2');
    productNameHeading.classList.add('card_title');
    productNameHeading.textContent = 'الاسم: ' + name;

    // 产品ID
    const productIdHeading = document.createElement('h4');
    productIdHeading.classList.add('card_title');
    productIdHeading.textContent = 'معرف المنتج: ' + ID;

    // 产品详情区域
    const cardTextDiv = document.createElement('div');
    cardTextDiv.classList.add('card_text');

    // 价格
    const priceParagraph = document.createElement('p');
    priceParagraph.textContent = 'السعر: ' + price;

    // 描述
    const descriptionParagraph = document.createElement('p');
    descriptionParagraph.textContent = 'الوصف: ' + description;

    // 评分
    const ratingParagraph = document.createElement('p');
    ratingParagraph.textContent = 'التقييم: ' + rate;

    // 评分按钮
    const ratingButton = document.createElement('button');
    ratingButton.textContent = 'تقييم';

    // 组装元素结构
    cardTextDiv.appendChild(priceParagraph);
    cardTextDiv.appendChild(descriptionParagraph);
    cardTextDiv.appendChild(ratingParagraph);
    cardTextDiv.appendChild(ratingButton);

    cardContentDiv.appendChild(productNameHeading);
    cardContentDiv.appendChild(productIdHeading);
    cardContentDiv.appendChild(cardTextDiv);

    cardDiv.appendChild(cardImageDiv);
    cardDiv.appendChild(cardContentDiv);

    liElement.appendChild(cardDiv);
    ulElement.appendChild(liElement);
    mainDiv.appendChild(ulElement);
    productsDiv.appendChild(mainDiv);

    // 添加到页面
    document.body.appendChild(productsDiv);
}

window.addEventListener('load', () => {
    fetch('/browseProduct', {
        method: 'GET',
        headers: {
            "Content-Type": "application/json"
        },
    })
    .then(response => response.json())
    .then(result => {
        products = result.browseProductResult; // 直接获取产品数组
        // 遍历所有产品创建卡片
        products.forEach(product => {
            createCardInHtml(
                product.image,
                product.productName,
                product.productID,
                product.productPrice,
                product.productDescription,
                product.productRate
            );
        });
    })
    .catch(err => console.error('请求失败:', err));
});

额外优化建议 #

1. 文件存在性检查：在readImagePath中添加fs.existsSync判断，避免读取不存在的文件导致报错。
2. 性能优化：如果图片数量多或体积大，返回Base64会增加响应体积，建议改为静态资源路由：后端设置/images/:filename接口直接返回图片文件，前端通过URL加载（更高效）。
3. 错误捕获：前端fetch添加catch逻辑，处理请求失败的情况。

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