Question 260135 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next/image is generating an Element type is invalid error

I’m trying to use the next/image to render an svg image. However whenever I try to do this, I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ImagePage`

The source code for ImagePage:

import React from 'react';
import Image from 'next/image';
import { Paper } from '@mui/material';

import Img from '../../images/image.svg';

const ImagePage = () => {
    return (
        <div>
            <Paper>
                <Image src={Img} />
            </Paper>
        </div>
    );
};

export default ImagePage;

If I put any other component between the div tags I do not see this error. The path to the image is correct.

Is there a different way I can render the image that doesn’t cause this error to be thrown?

Tags:

2

Answers


  1. 0

    The src attribute takes a string value in the Image component. Seems there is nothing wrong with your source code. However, your import section represents an object rather than a path, which might be conflicting with an object name or some reserved component name.

    So, you need to provide an SVG path instead of an imported object. It is supposed to be

    <Image src={`../../images/image.svg`} alt='Icon' width={32} height={32}/>

    PS: The Image component requires alt, width and height.

    Login or Signup to reply.
  2. 0

    To complete Gan’s answer, you need to provide a path that corresponds to the public folder. That’s the only folder you can put your assets in. Furthermore, you can use a forward slash to directly access the public folder. So considering that your asset is already in the public directory under the images folder, use this:

    <Image src={`/images/image.svg`} alt='Icon' width={32} height={32}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search