小编Dor*_*son的帖子

Chakra UI 图像组件无法识别图像路径

我目前正在学习如何使用 ChakraUI

当尝试使用它们加载本地图像时, import { Box, Heading, Text, Image } from "@chakra-ui/react";它们根本不显示,只是显示替代文本,就好像它们的路径未正确输入一样,我还尝试将图像源直接输入到组件中。

nextjs/image组件在完全相同的src路径下正常工作,我没有得到有关此特定错误的任何信息,我也尝试了该@chakra-ui/image组件,并且 import { Img } from "@chakra-ui/react";我也使用Nextjs工作,这些脉轮选项都不适合我。

import React from "react";
import { Box, Heading, Text, Image } from "@chakra-ui/react";
// import Image from "next/image"; //The nextjs image component does works! 
import source from "../images/logo.svg";
const Header = () => {
  return (
    <Box bg="brand.900" w="100%" p={4} color="white">
      <Box>
        <Image src={source} alt="s" w={100} h={100} borderRadius="full" /> …
Run Code Online (Sandbox Code Playgroud)

reactjs next.js chakra-ui

5
推荐指数
2
解决办法
2万
查看次数

标签 统计

chakra-ui ×1

next.js ×1

reactjs ×1