next.js 脉轮UI图像组件无法识别图像路径

deikduxw 于 11个月前发布在其他

关注(0)|答案(3)|浏览(87)

我正在学习如何使用ChakraUI
当尝试使用import { Box, Heading, Text, Image } from "@chakra-ui/react";加载本Map像时，它们根本不显示，只是alt文本，好像它们的路径没有正确输入，我还尝试直接将图像源输入到组件中。
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" />
      </Box>
    </Box>
  );
};

export default Header;

字符串
在ChakraUI文档中，它从未使用本地路径作为示例，但我认为这不会是一个问题

next.js

来源：https://stackoverflow.com/questions/68339712/chakra-ui-image-component-not-recognizing-image-path

3条答案

按热度按时间

jobtbby31#

我发现的唯一解决方案是将你的图片直接放到public文件夹中，然后从charkra-ui/react导入Image组件
x1c 0d1x的数据

import {Image} from '@chakra-ui/react'

const ImageComponent = () => {
  return {
     <Image src="/hero.jpg" alt="hero-image"/>
   } 
}

字符串

赞(0）回复(0）举报 11个月前

8dtrkrch2#

为了解决这个问题，你应该尝试从目录中导入图像并命名此导入。然后在<Image src ='{nameOfImport} />中写入导入名称。
范例：

import React from 'react';
import { Box, Image } from '@chakra-ui/react';
import nameOfImport from './nameOfPhoto.png'

const ImageBackground = () => {
  return (
    <Box>
      <Image src={nameOfImport}  alt='Background image' />
    </Box>
  );
};

export default ImageBackground;

字符串

赞(0）回复(0）举报 11个月前

tjjdgumg3#

我也有类似的问题，但在我的情况下，我没有使用导入。在使用了上面的导入后，它工作得很好。
既然你使用的是Next.js，我建议你从@chakra-ui/react导入并使用Chakra Img组件。

赞(0）回复(0）举报 11个月前