CODEWITHSUNDEEP
reactjstypescriptnext.jsjsxtsx
moustapha nassr
moustapha nassr

Reputation: 21

Next.js 13 images and videos not showing

This my code for the a components inside my Next.js 13 with ts, eslint, as well as Chakra UI.

Both images and videos is not working or showing.

I tried the HTML <img> tag as well as importing Image from Chakra. Still the same issue it's not working.

import { Flex } from "@chakra-ui/react";
import Image from 'next/image';

const Navbar:React.FC = () => {
    
    return (
        <>
        <Flex bg="white" height="44px" padding="6px 12px">
            <Flex>
                <Image 
                src={"/public/images/logo.png"} alt='Apex Logo' width="350" height="300"/> 
            </Flex>
        </Flex>
        <video src={'/public/images/about video.mp4 '} controls height="100%" width="100%"></video>
        </>
    )
}
export default Navbar;

screenshot for whats rendering in the next server

Upvotes: 2

Views: 1720

Answers (1)

Yilmaz
Yilmaz

Reputation: 49461

I think you dont have to pass /public

src={"/images/logo.png"}

next.js automatically will go inside public folder

Upvotes: 1

Related Questions