How to import an image to use in a Component?

[antonioOrtiz]

I am using "next": "^9.4.4",
And have : "next-images": "^1.4.0", "next-optimized-images": "^2.6.1",

And this is my next-config.js

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const optimizedImages = require('next-optimized-images');

module.exports = withImages(
  optimizedImages(
    withCSS(
      withSass({
        target: 'serverless',
        env: {
          MAPBOX_ACCESS_TOKEN:
            'TK421'
        },

        webpack(config, options) {
          config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
              loader: 'url-loader',
              options: {
                limit: 100000,
                target: 'serverless'
              }
            }
          });

          return config;
        }
      })
    )
  )
);

But in my component I get a broken image link, This is my component:

import { useState, useEffect } from 'react';

import { Card, Icon, Image, Segment, Form } from 'semantic-ui-react';

import axios from 'axios';


function ImageUploader({ userAvatar }) {
  var [userAvatar, setUserAvatar] = useState(userAvatar);


  useEffect(() => {
    setUserAvatar(userAvatar);
  }, [userAvatar]);

  function fileUploader(e) {
    console.log('event fileUploader ', e);
    var imageFormObj = new FormData();

    console.log('e.target.files[0] ', e.target.files[0]);

    imageFormObj.append('imageName', 'multer-image-' + Date.now());
    imageFormObj.append('imageData', e.target.files[0]);
    setUserAvatar(window.URL.createObjectURL(e.target.files[0]));

    console.log('userAvatar ', userAvatar);
    console.log('imageFormObj ', imageFormObj);

    axios
      .post(`/users/uploadmulter`, imageFormObj)
      .then(data => {
        if (data.data.success) {
          alert('Image has been successfully uploaded using multer');
        }
      })
      .catch(err => {
        alert('Error while uploading image using multer');
      });
  }

  return (
    <>
          <Image
            src={require('../../public/static/uploads/profile-avatars/placeholder.jpg')}
            alt="user-avatar"
          />
    </>
  );
}

I am confused too because in the docs it seems to indicate static files/images are supported outta the box...

Static File Serving
Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

For example, if you add an image to public/my-image.png, the following code will access the image:

I've tried as they recommend:

<Image src="/uploads/profile-avatars/placeholder.jpg" alt="user-avatar" />

And the funny thing I am not getting a 404 in the browser!

Any help would be appreciated!

[jamesmosier]

Assuming your project structure is like this:

pages/
  ...
public/
  static/
    uploads/
      profile-avatars/
        placeholder.jpg

then you would reference it like:

<Image src="/static/uploads/profile-avatars/placeholder.jpg" alt="user-avatar" />

In your last example you were missing /static/ before your image source.

[antonioOrtiz]

Thanks James! That worked for me!

[rafaelalmeidatk]

FWIW, if you use the absolute path in the src with the public folder you don't need the next-images or next-optimized-images packages