Я пытаюсь получить простой компонент next/image, отображаемый правильно, но изображения просто не загружаются. Я использую только что выпущенный nextjs 13, так что это новая версия компонента.
Я использую sanity.io сзади, и мои изображения хранятся там. Мне неясно, вызвана ли эта проблема новым компонентом next/image или что-то не так с моим кодом. Реквизиты src и alt передаются правильно, и источник, кажется, правильно регистрируется (изображение ниже), но изображение не отображается.
/приложение/Рисунок.tsx:
"use client";
import Image from "next/image";
interface Props {
src: string;
alt: string;
width: number;
height: number;
}
export default function Figure(props: Props) {
return (
<figure>
<style jsx>{`
figure {
position: relative;
width: 100%;
margin: 0;
padding-top: ${((props.height / props.width) * 100).toFixed(2)}%;
}
`}</style>
<Image src = {props.src} alt = {props.alt} fill />
</figure>
);
}
следующий.config.js:
images: {
domains: ["cdn.sanity.io", "images.pexels.com"],
},
Результат
🤔 А знаете ли вы, что...
С React можно легко интегрировать с существующими проектами и кодом.
Если вы извлекаете изображение напрямую, вам необходимо преобразовать полученный ответ данных в blob, а затем создать URL-адрес объекта (URL.createObjectURL) для тега Image, который будет использоваться в качестве источника.
Я также сделал демо Stackblitz.
import Image from 'next/image';
import React from 'react';
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then((res) => res.blob());
export default function App() {
const url = 'https://source.unsplash.com/random';
const { data, error } = useSWR(url, fetcher);
if (error) return 'An error has occurred.';
if (!data) return 'Loading...';
const dataUrl = URL.createObjectURL(data);
return (
<figure>
<style jsx>{`
figure {
position: relative;
width: 100%;
margin: 0;
padding-top: ${((200 / 200) * 100).toFixed(2)}%;
}
`}</style>
<Image src = {dataUrl} alt = {'test'} fill />
</figure>
);
}