Loading next image with turbopack | Next.js | Page 1

#

Yes, something like this:

import NextImage from 'next/image'

export const Header = () => {
const img = <NextImage src="/media/mylogo.svg" otherpropshere />

return div with img blah
}

where the media folder is inside /public relative to the root of my application

#

Sorry for short example, discord on phone... Tedious to type.

#

Silly - there's a browser discord... so, trying again...

#

import NextImage from 'next/image'

export const Header = () => {
const logo = (
    <div className='h-full col-span-full md:col-span-1'>
      <NextLink href='/'>
        <div className='xs:hidden md:flex justify-center h-full relative'>
          <NextImage
            alt='Logo'
            src='/media/my-logo.svg'
            fill
            priority
            sizes='16vw'
            style={{
              pointerEvents: 'none',
              paddingTop: '16px',
              paddingBottom: '8px',
              paddingLeft: '8px'
            }}
          />
        </div>
      </NextLink>
    </div>
  )
return (
    <>
      <header className='static flex flex-col w-full bg-primaryc'>
        <div
          className='justify-center relative items-center grid grid-rows-1 grid-cols-[1fr_5fr_1fr]'
          id='logo bar'
        >
          {logo}
          <div className='mx-auto xs:hidden md:flex md:flex-col text-center col-start-2  text-white'>
            <h1 className={`text-h1s font-light`}>Title Here</h1>
          </div>
        </div>
      </header>
    </>
  )

is a fuller example, with some parts removed from my actual Header component. Then I import this in layout.tsx and it renders fine.

#Loading next image with turbopack