Saya sedang mengerjakan proyek baru dan mempelajari ReactJS. Saya telah menyimpan gambar di base64 ke database MySQL dan sekarang saya mencoba melakukan permintaan GET sehingga gambar ditampilkan di browser alih-alih diunduh, namun, meskipun mencoba mengunduh file, file tersebut hanya file yang berisi string base64 alih-alih gambar yang sebenarnya.

File dalam database terlihat seperti di bawah ini (hanya potongan base64)

data:image/png;base64,iVBORw0KGgoAAAA

API untuk mengambil gambar adalah seperti di bawah ini:

export default async function handler(req : NextApiRequest, res : NextApiResponse) {
    const prisma = new PrismaClient()

    if (req.method === "GET")
    {
        const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });
        const decoded = Buffer.from(image.content).toString("base64");
        console.log(decoded)
        res.status(200).send(decoded);
    }
    else
    {
        res.status(405).json(returnAPIErrorObject(405, "Method not supported by API endpoint"));
    }
}

Saya telah memodifikasi next.config.js untuk memberikan respons tajuk khusus yang berisi di bawah ini:

module.exports = {
    async headers() {
        return [
            {
                source: '/api/images/:image_id',
                headers: [
                    {
                        key: 'Content-Type',
                        value: 'image/png:Base64'
                    }
                ]
            }
        ]
    }
}

Seperti yang disebutkan, ketika saya membuka URL http://localhost:3000/api/images/4 (4 menjadi id gambar) itu mengunduh file yang berisi string base64 yang ada di database, alih-alih menampilkan gambar di browser.

PERBARUI

Berdasarkan tautan dalam komentar dari @sean w sekarang mencoba untuk menampilkan gambar tetapi alih-alih menampilkan gambar yang sebenarnya, itu hanya menunjukkan jendela kosong dengan kotak putih seperti yang ditunjukkan pada tangkapan layar di bawah.

Kode saya sekarang terlihat seperti berikut:

        const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });

        const decoded = Buffer.from(image.content, 'base64').toString();

        let imageContent = decoded.replace(/^data:image\/png;base64,/, '');

        console.log(decoded);

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': imageContent.length
        });
        res.end(imageContent);

Di bawah ini adalah tangkapan layar yang menunjukkan apa yang sebenarnya ditampilkan di halaman alih-alih gambar saya yang sebenarnya.

How images is being shown instead of actual image

0
Boardy 9 Mei 2021, 15:09

1 menjawab

Jawaban Terbaik

Saya telah menemukan masalahnya, alih-alih membuat buffer dari database yang menurut saya terlihat seperti Prisma karena kolomnya adalah gumpalan, tetap memberi saya buffer. , saya pertama-tama mengekstrak string base64 dari DB dan menghapus data:image/png;base64 dari string dan kemudian membuat buffer dari string itu dan mengirimkannya untuk respons:

const {image_id} = req.query;
        const image = await prisma.images.findFirst({
            where: {
                imageId: parseInt(image_id)
            }
        });

        const decoded = image.content.toString().replace("data:image/png;base64,", "");
        const imageResp = new Buffer(decoded, "base64");

        res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': imageResp.length
        });
        res.end(imageResp);
0
Boardy 11 Mei 2021, 13:01