SVG 作为对象传递给 img src

Question

对于使用 NextJS 和 Sanity.io、

的网站

我正在本地导入图片

import large_logo from '../../assets/logo-large-1200x630.svg

我在 img 标签内调用它作为 src

<img src={large_logo}/>

但是，图片损坏，无法显示。

HTML被渲染为

<img src="[object Object]">

这个问题的唯一解决办法是调用“对象”的 src

<img src={large_logo.src}/>

然而香草 React does not require us to call the src.

使用 NextJS 和 Sanity 时导入不起作用吗？

Answer 1

对于 Next.js 你必须做这样的事情：

/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg

然后在JSX

<Image src={large_logo} />

Answer 2

当您使用 Next.js 并且想要渲染尺寸超过 40*40（像素）的图像时，需要从 next/image 导入 <Image /> 组件。该组件优化您的图像并在您的应用程序中呈现。所以按照下面的例子来帮助自己..

import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg

在您的组件中，您可以为图像添加此代码片段

<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />

首先您需要更改图像的图像目录并将其放入应用程序的public目录中，因为这是默认行为Next.js 需要图片。

在您的组件中，您需要传递 src 值、alt 值并且通常是 height - width prop 或 layout prop.

您还可能需要 Next.js 的官方文档：https://nextjs.org/docs/api-reference/next/image

SVG 作为对象传递给 img src

SVG is being passed to img src as an object

reactjs

next.js

sanity