I’m making a QR Code generator app. It provides QR Codes in SVG but I also want PNG and EPS options to be available (the API I use allows that)
Related code snippets:
type: req.query.type || "svg",
const [type, setType] = useState("");
const res = await axios.get("api/generate-qrcode/", {
params: { input, size, backcolor, forecolor, type, setlabel, labeltext },
});
<select
className="text-primary text-base md:text-xs w-1/2 md:w-4/5 p-3 mt-4 mb-6 bg-secondary border-double border-b-4 border-b-primary border-r-4 border-r-primary rounded outline-none"
onChange={(e) => setType(e.target.value)}
>
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="eps">EPS</option>
</select>
My request sends type=png but I can’t receive the QR code as the response. It works okay when I select SVG.
Response snippet:
{response && (
<div className="mt-10 bg-primary">
<SVG src={response} />
</div>
I highly suspect the response code causes the error but I don’t know how to fix it.
I tried this but didn’t work:
{response && (
<div className="mt-10 bg-primary">
{type === "svg" && <SVG src={response} />}
{type === "png" && <img src={`data:image/png;base64,${response}`} alt="QR Code" />}
</div>
Also, on the top of the file, I have import SVG from "react-inlinesvg";
to handle SVG. I did a research to see if I also need to import PNG, but documentations were stating it is not required.