URL будет в компоненте React.js IMG (как будет в кодовом флаге).
Я получаю 404 или 401 ошибки. /> Это функция для сервера развертывания, который должен получить мне URL -адрес изображения. < /p>
const cloudinary = require("cloudinary").v2;
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
secure: true,
});
exports.handler = async (event, context) => {
try {
const { public_id } = JSON.parse(event.body || "{}");
const url = cloudinary.url(public_id, {
type: "authenticated",
sign_url: true,
transformation: [
{
width: 500,
height: 500,
crop: "fill",
gravity: "auto",
fetch_format: "auto",
quality: "auto",
},
],
});
return {
statusCode: 200,
body: JSON.stringify({ url }),
};
} catch (err) {
return {
statusCode: 500,
body: JSON.stringify({ error: err.message }),
};
}
};
< /code>
Это код, который создает IMG и возвращает его: < /p>
import { AdvancedImage } from "@cloudinary/react";
import { useEffect, useState } from "react";
const SecureCloudinaryImage = () => {
const [imgUrl, setImgUrl] = useState("");
useEffect(() => {
try{
fetch("/.netlify/functions/", {
method: "POST",
body: JSON.stringify({ public_id: "
);
};
export default SecureCloudinaryImage;
< /code>
Когда я запускаю этот код, console.log («Это URL» + imgurl) < /code> показывает URL, поэтому я знаю, что URL не пуст. />https://res.cloudinary.com//image/authe ... auto,h_500, q_auto,500/ Я попытался пройти облачную документацию, но не смог найти хорошего предложения о том, как сделать это с ограниченным изображением. < /p>
Подробнее здесь: https://stackoverflow.com/questions/797 ... ge-via-url
Мобильная версия