-
Notifications
You must be signed in to change notification settings - Fork 27k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't import static files like images #1935
Comments
Images by default are not accessible via import. You would need to modify the babelrc to allow for this. What data are you expecting to get returned from importing an image like that? a base64 encoded version of it? A browser resolvable path to it? |
@lededje thanks for reply. so how to config this ? I havn't find this in the document. I'd appreciate it if you can give me an example ( base64 & resolvable path) |
I would also like to know that. It seems the next team has strong opinions about using webpack for processing images, but it seems very limiting that you can't do it if you want to... |
If you add the image to the |
@jpsc But this doens't work in css using styled-jsx. |
@paulobarcelos it's not a strong opinion. With our SSR setup, it's kind a hard to it. (Since we don't run webpack in the server) @laoqiren why it's not working simply use the image path like this:
|
@arunoda yes, It doens't work just using |
@arunoda See, we have a problem here which we're trying to solve, we're not looking for workarounds in which you're suggesting to use static images. how can we achieve requiring images (png, jpg, etc...) ? I personally prefer to have a customizable web pack for better customizability. |
@mehdijjz what is it your are trying to achieve? It's difficult to know what to suggest when you don't explain what you want when importing images. The example given above doesn't have to be a CSS background image, it can be an image tag too. |
@lededje I want to use a webpack/babel loader to require images in my components. e.g: |
@mehdijjz That which runs on the server must also run on the client. This will not run on the client if you use webpack to perform this task. Here is a link to using a custom babel configuration but I must stress, I doubt you will find what you are looking for. I ask once again, what do you expect |
@laoqiren The files must be within a |
Thanks @lededje for all those references and details. @mehdijjz there are a lot of things we like to do. But sometimes, we can't do all of them. In the meantime, you need live without those features. |
add the following babel plugin: |
You can actually use webpack loaders in v5, someone already made a plugin for handling images: https://github.com/arefaslani/next-images |
This doesn't really work. I tried it.
|
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
It looks like you can add static files in general by following the pattern of the withSass (I don't understand the hard coding of I'm still playing with it, but I wish there was better first class support for this, or more documentation around it. Using a |
@tarang9211 I've already responded it in this issue twopluszero/next-images#10 |
how to add the image to static? what's the static? is it webpack config? |
@Ivanenko-O It's a directory inside your application's root directory. everything inside it will be served statically. |
this doesn't work well with amplify |
@msolimans Can you provide an example to see why it doesn't work with Amplify? |
Unfortunately |
@Italox hardcoding image urls doesn't work in case images needs to be served from a different domain than the app itself (like CDN for example). |
Yeah, I agree in this case. |
webpack loader fixed the problem, still typescript complains about it |
Hey check this out, https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md I just saw this in my console after digging for a good bit. Was able to get it working by adding a |
@Schmerb thanks dude, seems like it works :) |
In my app, I
In my
It's unclear to me when nextjs does things with webpack, so I added It's unclear to me if this pattern adds any overhead to the build, because I'm not sure what webpack is doing under the hood with images/static assets in dev mode. |
I'm using |
@samuelcastro next-images also supports typescript and you can find how to use it with typescript in the readme. |
loaders not working with styled jsx <style jsx global>{ `
body {
background-image url('./lol.png')
}
<style>
|
If you're coming here from google, this is what seams best as of now : next-optimized-images |
I don't understand why would you want to use something like next-images or next-optimized-images if all they do is configuring file-loader/url-loader for you. These projects should be nothing more than gists people can contribute to and modify to their needs. Shouldn't it output these files to
Tested this only in development so far but at least it outputs the files according to the official docs and it's clear to understand. I will update it in case it doesn't work in production.
By the way, |
As @bugproof points out, you don't need packages like next-images or next-optimized-images. Here are steps on how you can import images. I copied how
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.module.rules.push({
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader")
});
return config;
}
}; |
It didn't work in production! |
I changed the file from .jpg to .jpeg and it worked fine. Before, it was working fine in development but wasn't showing the image in production. |
Really struggling with this one, I mean I've created a public folder in the root of my directory and added an image there. I try this in any page or component Not really sure to do here. My next version is the latest. And according to their docs, I only have to create public directory. |
What is the correct way to serve images from a CDN? |
Can you show us the code from footer.js where you try to use that file? You don't have to put it in public folder when you use |
This comment has been minimized.
This comment has been minimized.
How |
but,when I want to deploy in a subfolder,the img is 404 |
Have to second the sentiments from this comment #1935 (comment) This Related: #18393 https://nextjs.org/docs/api-reference/next/image 👀 Not asking for these inline styles at all <Image src="/images/hero-banner-example.png" width="" height="" /> <img src="/_next/image?url=%2Fimages%2Fhero-banner-example.png&w=3840&q=75" decoding="async" srcset="/_next/image?url=%2Fimages%2Fhero-banner-example.png&w=3840&q=75 1x" style="visibility: inherit; position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"> How about a hook to build just the URL? const imgSrc = useNextImage('path/to/image');
// thanks I'll take it from here |
Dont't use any custom config for image load from public folder, I had face same issue with custom config but when I removed the code block, it is started working. Hope it helps some one with .less configuration. `const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { |
This is working! Thank you so much! |
In my case I want to do it to preload the image |
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. |
version: v2.1.1
additional webpack config to next.config.js:
then in my component:
import image from '../static/enen.png'
it comes the error:
I have tried to change the url as '/static/enen.png' , and in the css-in-jsx:
all above comes the same error: can't find the module, I can get it using
<img src="../static/enen.png"/>
hope your help.
The text was updated successfully, but these errors were encountered: