trpc how to return image data?

Question

i am new to learn trpc , when i try to build a new app, i have got some error,i have attached the related backend code and part of frontend code.

Here is the related code:

list:privateProcedure.query(async ({ctx})=>{
      try{
        const products = await ctx.db.product.findMany({
         select: {
            id: true,
            name: true,
            description: true,
            price: true,
            category: true,
            photoId:true,
            photo:true,
            createdAt: true,
            updatedAt: true,
          },
          orderBy: {
            createdAt: 'desc',
          },
          take: 12,
        });
        return products
      }catch(err){
        return {error:err}
      }
    }),

model Product {
  id          Int      @id @default(autoincrement())
  name        String
  slug        String?
  description Json
  price       Float
  categoryId  String
  quantity    Int?
  sold        Int      @default(0)
  photoId     String
  photo       Photo    @relation(fields: [photoId], references: [id])
  shipping    Boolean?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  category    Category @relation(fields: [categoryId], references: [id])
  orders      Order[]
}

Database ScreenCapture

Here is a part of frontEnd code,the front end use React.js:

{products?.map((p) => (
              <Link
                key={p.id}
                href={`/dashboard/admin/product/update/${p.slug}`}
              >
                <div className="card mb-3">
                  <div className="row g-0">
                    <div className="col-md-4">
                    <Image
                     src={`${p.photo.data}`}
                     alt={p.name}
                      className="img img-fluid rounded-start"
                    />
                    </div>

And return the error message: TRPCClientError: Unable to transform response from server

Any one can help to fix this error,thanks.