Handling images about next.js HOT 24 CLOSED

@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.

from next.js.

@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

from next.js.

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

from next.js.

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

from next.js.

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: #1935 (comment)

...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/' 

from next.js.

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.

from next.js.

@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.

from next.js.

@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.

from next.js.

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
}
}));

from next.js.

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

from next.js.

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

from next.js.

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

from next.js.

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

from next.js.

@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.

from next.js.

@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)

from next.js.

Posted more details in a new issue I created ahalimkara/babel-plugin-import-static-files#1

from next.js.

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

from next.js.

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

from next.js.

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

from next.js.

Can someone reopen until there is official support for the #79 (comment) 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 #79 (comment)

Seems like vercel/styled-jsx#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. 🤷‍♂️

from next.js.

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

next-images only configures webpack

from next.js.

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?

from next.js.

Thanx KeiKal

from next.js.

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

from next.js.