Next.js: Handling images

[pawelgalazka]

I'm just wondering, if I want to use an image in my component how should I handle it ? and where the image should be stored ? Couldn't find that in your docs or examples.

[impronunciable]

Hi!

From the docs Static file serving. ./static/ is mapped to /static/

So you can use a regular img tag
Create a folder called static and place your image inside.

Feel free to reopen if you have any questions

[pie6k]

@impronunciable I think its not so good idea to store all the images in the same, global, static folder. How in 2 months will you know what images are used and what are not anymore? Images could be stored in the same folder as a component that uses them and they could be moved to /static by next.js itself with some layer of abstraction so I could just do:

import myImg from './myImg.png';

and later on

<img src={myImg} />

That would be good developer experience.

[impronunciable]

@pietrasiak Well, if you want to talk about good ideas for storing images, you should store them on a CDN for production. A static folder is the standard for development, I won't say it's a terrible idea. Although you can use webpack loaders to accomplish what you propose

[ahalimkara]

It is completely terrible idea to put all static files in a single folder separated from component. It is difficult to remember all files and also rename files in static folder to match component's structure. I agree with @pie6k suggestions but I don't know whether it is difficult to implement or not. In such a solution we might also benefit from loader's optimisations, like svg-loaders.
I would like to implement this feature but I am new to next.js.

[pie6k]

@impronunciable I believe having them on static server with good files organization is good starting point even without CDN.

If they'd be processed in some way (moved to static folder by next.js, renamed etc) before their final 'url' is returned, I think it'd be relatively easy to hook some function there that would manage moving those files to CDN, so you would still use.

import myImg from './myImg.png';
// and then
console.log(myImg); // 'http://your.cdn/myImg.png'

That would allow whole new class of next.js effective workflow customizations.

[ahalimkara]

Ok, I have added this plugin: babel-plugin-import-static-files
It is working so far, if you have any problem let me know.
It simply copies imported images to /static folder and transform image path to point /static/path/to/img.png. This plugin is forked from babel-plugin-transform-assets-import-to-string

[anselmdk]

@ahalimkara should this be working out of the box in NextJS?
I'm getting a "You may need an appropriate loader to handle this file type", in next 4.1.0.

[pie6k]

@anselmdk by code example import myImg from './myImg.png' I've meant example of how it could work, not how it actually works.

[anselmdk]

Ok, got it, so we need a custom loader to make this work.

[ahalimkara]

@anselmdk yea it should work, if you ahve any problem let me know.

[amosyuen]

@ahalimkara Seems like babel-plugin-import-static-files doesn't compose the path correctly for windows.

The error:

E:\Dropbox\Programming\client\src\static\E:\Dropbox\Programming\client\src\app\routes\Landing contains invalid WIN32 path characters.

[ahalimkara]

@amosyuen Do you use default options or your custom options? Landing file doesn't have an extension?

(I have enabled Issues tab, so you can submit your requests there)

[amosyuen]

Posted more details in a new issue I created https://github.com/ahalimkara/babel-plugin-import-static-files/issues/1

[luanwulin]

@ahalimkara there is something wrong. i've post an issue to you . will you help me ahalimkara/babel-plugin-import-static-files#2

[ahalimkara]

@luanwulin yea sure. But please use plugin's Issues page, I am checking all there. Thank you.

[luanwulin]

@ahalimkara i've post an issue on your issues page. issues#2

[corysimmons]

Can someone reopen until there is official support for the https://github.com/zeit/next.js/issues/79#issuecomment-300138252 recommendation (or an official stance on why you won't be implementing that, or official recommendation for a workaround)?

Just seems most of the community agrees with https://github.com/zeit/next.js/issues/79#issuecomment-300138252

---

Seems like https://github.com/zeit/styled-jsx/pull/148 can fix this.

Untested, pseudo example:

// components/Header/HeaderStyle.js
export default `
h3 { color: red; }
`

// components/Header/HeaderComponent.js
import style from './HeaderStyle'

export default () =>
  <div>
    <h3>Yo</h3>
    <styled jsx>{style}</styled>
  </div>

For those interested in Nicolas Gallagher's component architecture setup, you might be able to split HeaderComponent.js into HeaderScript.js and HeaderTemplate.js. 🤷‍♂️

[jonjhiggins]

You can now require or import images in Next:

You can actually use webpack loaders in v5, someone already made a plugin for handling images: https://github.com/arefaslani/next-images

ref: https://github.com/zeit/next.js/issues/1935#issuecomment-367039454

...or just modify your webpack config as per settings in https://github.com/arefaslani/next-images/blob/master/index.js e.g.

publicPath: '/_next/static/images/',
outputPath: 'static/images/' 

[timneutkens]

As you can see here: https://github.com/arefaslani/next-images/blob/master/index.js

next-images only configures webpack

[naeem1098]

I want to use sass and images in my development but there is an issue to configure these modules.

@zeit/next-sass and next-images configuration problem in next.config.js

``
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')

module.exports = withSass();
module.exports = withImages();
``

How to solve it?

[KeiKal]

I want to use sass and images in my development but there is an issue to configure these modules.

@zeit/next-sass and next-images configuration problem in next.config.js

``
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')

module.exports = withSass();
module.exports = withImages();
``

How to solve it?

hi just saw this one. but i still have problems redirecting the url of the images
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

module.exports = withImages(withSass({
webpack: function (config) {
// custom configs
return config
}
}));

[ghost]

Thanx KeiKal

[full-pack-development]

@impronunciable to be precise any files should be stored on cdn - bundled js and css as well. I mean talking about best practices. /shrug