如何在React组件中实现与Laravel Blade相同的base64图片链接编码

首先拆解原Laravel代码的核心逻辑：

• 服务端读取$auction->thumbnail_link对应的图片文件内容
• 对文件内容做base64编码
• 拼接为data URI格式赋值给DOM的data-src属性
• 代码里的@符号用于抑制文件读取失败的报错

场景1：React服务端渲染（SSR，如Next.js服务端组件、Nuxt.js SSR等） #

这种场景和Laravel服务端渲染的执行逻辑完全一致，都是在服务端完成文件读取、编码后注入到HTML：

// 以Next.js 13+ 服务端组件为例
import fs from 'node:fs/promises';

async function AuctionItem({ auction }) {
  let base64Str = '';
  try {
    // 读取图片文件内容，auction.thumbnail_link为服务端可访问的文件路径
    const fileContent = await fs.readFile(auction.thumbnail_link);
    // 转base64编码
    base64Str = fileContent.toString('base64');
  } catch (e) {
    // 读取失败时返回空值，和@抑制错误的效果对齐
  }

  return (
    <img 
      data-src={`data:image/;base64,${base64Str}`}
      alt="拍卖品缩略图"
    />
  )
}

场景2：React客户端渲染（CSR） #

客户端环境无法直接读取本地/服务端文件系统，需要通过HTTP请求拉取图片资源后再转base64，逻辑如下：

import { useEffect, useState } from 'react';

function AuctionItem({ auction }) {
  const [base64Str, setBase64Str] = useState('');

  useEffect(() => {
    const fetchImageToBase64 = async () => {
      try {
        // 请求图片资源，注意需要图片服务配置跨域权限
        const res = await fetch(auction.thumbnail_link);
        const blob = await res.blob();
        // 转base64编码
        const reader = new FileReader();
        reader.onloadend = () => {
          const base64 = reader.result.split(',')[1];
          setBase64Str(base64);
        }
        reader.readAsDataURL(blob);
      } catch (e) {
        // 读取失败不做额外处理，对应原@抑制错误逻辑
      }
    }

    fetchImageToBase64();
  }, [auction.thumbnail_link]);

  return (
    <img 
      data-src={`data:image/;base64,${base64Str}`}
      alt="拍卖品缩略图"
    />
  )
}

注意事项 #

原Laravel代码中的data:image/;缺少图片MIME类型，如果需要更规范的写法可以在读取文件时获取MIME类型拼接进去，要和原逻辑完全对齐的话保留原格式即可。

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