[Question] Best way to export with images?

[matt-grain]

Hi, I'm not a next.js expert so I hope you'll forgive any stupid things I will ask :)

Currently it uses next export to build the static website and it doesn't support the <img> HTML tag. So I replaced it with the next.js Image API:

import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';

import { projects } from '../utils/projectsData';
import Image from 'next/image';

const Home = () => (
  <div className="home">
    <Image
      src="/images/logo-transparent.png"
      alt="logo"
      width={250}
      height={118}
    />
    <h1>What Can I Deploy to Static Apps?</h1>
...

But the next export requires an Image optimizer service so I used a dummy one

import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';

import { projects } from '../utils/projectsData';
import Image from 'next/image';

// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
  return src;
};

const Home = () => (
  <div className="home">
    <Image
      src="/images/logo-transparent.png"
      alt="logo"
      width={250}
      height={118}
      loader={customLoader}
    />
    <h1>What Can I Deploy to Static Apps?</h1>
...

That works but that's a pretty bad workaround I guess.

Is there an Azure service or another way to support static local images ?

Thanks !

[leozaur1808]

Hello, I have found a workaround using Next's docs. Don't forget to set the right path in the next.config.js. I used the akamai and set it up my file like below:

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    loader: 'akamai',
    path: ""
  },
  trailingSlash: true,
}

module.exports = nextConfig