Question

我遇到了无法在nextjs中导入图像文件的问题

为什么不明白不能导入图像文件...

我在“ image / images.jpg”中有一个图像文件

在chrome浏览器中，没有关于图片的错误消息，

，然后在“元素”标签中，图像尺寸为“ 0 x 0”。

因此，我将图片标签设置为'style = {{width：'100px'，height：'100px'}}' 但是，我不能解决这个问题。

代码下方。

constexpr CharT* data() noexcept;

pages/index.js
import * as React from "react";
import Head from "next/head";
import AppLayout from "../components/AppLayout";
import {img} from '../image/images.jpg'


const Home = () => {
  return (
    <>
      <Head>
        <title>Finder</title>
      </Head>
      <AppLayout>
        <div>Home test</div>
        <image src={img} style={{width:'100px', height:'100px'}} />
      </AppLayout>

    </>

  );
};

export default Home;

components/Applayout.js

import React from 'react';

import {Menu,Input, Row, Col} from 'antd';
import Link from 'next/link'
import styled from 'styled-components';

const DivStd = styled.div`
  display: flex;
  justify-content: flex-end;
`

const MenuStd = styled(Menu)`
`

const MenuStdChildren = styled(Menu)`
  justify-content: flex-end;
`

const AppLayout = ({children}) => {
  return (
    <>
      <DivStd>

        <MenuStd mode='horizontal'>

          <MenuStdChildren.Item>
            <Link href='/'><a>Home</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/signin'><a>sign in</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/signup'><a>sign up</a></Link>
          </MenuStdChildren.Item>

          <MenuStdChildren.Item>
            <Link href='/mobxtest'><a>mobxtest</a></Link>
          </MenuStdChildren.Item>

        </MenuStd>

      </DivStd>


      <Row gutter={8}>

        <Col xs={24} md={2} />
        <Col xs={24} md={16}>{children}</Col>
        <Col xs={24} md={6} />

      </Row>

    </>
  )
}

export default AppLayout;

Answer 1

将您的img导入语句更改为以下内容。

import img from '../image/images.jpg'

为什么不能在nextjs中导入图像文件？

1 个答案: