我在 NextJS 上生成 Flux 图像时遇到问题。我有
Image is missing src property
错误。我尝试查看 Replicate 的 Flux 文档,但他们没有提到任何有关 NextJS 上 src 属性的内容。
我的路线代码是:
import { NextRequest, NextResponse } from "next/server"
import Replicate from "replicate"
const replicate = new Replicate({
auth: process.env.REPLICATE_API_TOKEN,
})
export async function POST(req: NextRequest) {
try {
const { prompt } = await req.json()
if (!prompt) {
return NextResponse.json({ error: "Prompt is required" }, { status: 400 })
}
const output = await replicate.run("black-forest-labs/flux-schnell", {
input: {
prompt,
num_outputs: 1,
aspect_ratio: "1:1",
output_format: "webp",
output_quality: 80,
go_fast: true,
},
})
return NextResponse.json({ output })
} catch (error) {
console.error("Error generating image:", error)
return NextResponse.json(
{ error: "Failed to generate image" },
{ status: 500 }
)
}
}
我的 page.tsx 是:
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Loader2 } from "lucide-react"
import Image from "next/image"
export default function ImageGenerator() {
const [prompt, setPrompt] = useState("")
const [imageUrl, setImageUrl] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null)
const [isLoading, setIsLoading] = useState(false)
async function handleSubmit(e: React.FormEvent) {
e.preventDefault()
setImageUrl(null)
setError(null)
setIsLoading(true)
try {
const response = await fetch("/api/replicate", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt }),
})
const data = await response.json()
if (response.ok && data.output) {
setImageUrl(data.output[0])
} else {
setError(data.error || "Failed to generate image")
}
} catch (error) {
console.error("Error generating image:", error)
setError("An error occurred while generating the image")
} finally {
setIsLoading(false)
}
}
return (
<div className="max-w-md mx-auto mt-10 p-6">
<Card className="p-6">
<h1 className="text-2xl font-bold mb-4">Image Generator</h1>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
htmlFor="prompt"
className="block text-sm font-medium text-gray-700 mb-1"
>
Enter your prompt
</label>
<Input
type="text"
id="prompt"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="A serene landscape with mountains and a lake"
required
/>
</div>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Generating...
</>
) : (
"Generate Image"
)}
</Button>
</form>
{error && <p className="mt-4 text-red-600">{error}</p>}
{imageUrl && (
<div className="mt-6 relative w-full aspect-square">
<Image
src={imageUrl}
alt="Generated image"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="rounded-lg shadow-lg object-cover"
/>
</div>
)}
</Card>
</div>
)
}
如何解决这个问题?
Same Problem i am facing , if anyone have answer to it please let me know
import { NextRequest, NextResponse } from "next/server";
import Replicate from "replicate";
export async function POST(req: NextRequest) {
const data = await req.json();
const replicate = new Replicate({
auth: process.env.NEXT_PUBLIC_REPLICATE_API_TOKEN || "",
});
const { prompt } = data;
const input = {
prompt: prompt,
output_format: "png",
num_outputs: 1,
aspect_ratio: "1:1",
output_quality: 80,
};
const output = await replicate.run("black-forest-labs/flux-schnell", {
input: input,
});
console.log(output);
return NextResponse.json({ imageUrl: output });
};
---i am getting empty imageUrl