Base64 图像未在移动设备上显示答案

【问题标题】：Base64 images not displaying on mobileBase64 图像未在移动设备上显示
【发布时间】：2020-10-05 19:01:11
【问题描述】：

大家好，开发者们！

我使用 MERN 堆栈制作了这个电子商务应用程序，我在其中以管理员身份创建产品，上传图像，将其作为二进制数据保存在数据库中，然后使用以下代码将其显示在 SHOP 页面上：

src={`data:image/jpg;base64,${img.data}`}

虽然这在我的 PC 浏览器中完美运行并且所有图像都会相应地显示，但当我在移动设备上打开应用程序时，有些图像会显示而有些则不会，这是没有意义的，因为它们都是 JPEG，它们的大小大致相同。

在移动设备上使用 base64 编码图像时是否有某种规则，或者它们不能一起工作，如果有办法解决它，我该怎么做？

关于在数据库中保存图像并在使用 MERN 堆栈时显示它们的最佳和最可靠的做法是什么？

提前致谢！

【问题讨论】：

标签： javascript html image base64 mern

【解决方案1】：

从技术上讲，情况不应该如此。我有类似的东西，它工作得很好。我正在上传图片转换为 base64 & 进行了 api 调用以上传相同的内容。又进行了一次 api 调用以获取相同的内容并将其与图像 src 一起使用。所以这是我的 base 64 转换。

//base 64转换//

`onChange=event=>{
        this.setState({
            file: URL.createObjectURL(event.target.files[0])
        })
        const ProjectfileSize = Math.round((event.target.files[0].size / 1024)); 
        this.setState({
            fileSize: ProjectfileSize
        })
        var reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        reader.onload = () => 
{
            const base64File = reader.result.replace(/^data:[a-z]+\/[a-z\-]+;base64,/, "");
            this.setState({
                convertedFile: base64File
            })
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };

}
`

【讨论】：