Ich möchte Bilder importieren können wie:
import image from './image.png; // image variable should have static url
Mein Lader sieht so aus ( next.config.js
):
module.exports = {
webpack: config => {
// handle images
config.module.rules.push({
test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
use: [
{
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]',
},
},
{
loader: 'file-loader',
options: {
context: 'public',
name: '/static/images/[name]-[hash].[ext]',
publicPath: '/',
},
},
],
});
return config;
},
};
Ergebnis ist fast gut.
Bilddatei befindet sich in .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png
image
Variable /static/images/image-ef89065b898bb1e3e802c62e4b264417.png
, aber wenn ich versuche, ein Bild mit http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png
zu laden, erhalte ich einen 404-Fehler.
Irgendwelche Ideen?
ps. Ich möchte keine Dateien manuell in den Ordner static
. Ich möchte, dass sich Bilder, die sich auf eine Komponente beziehen, im selben Ordner wie die Komponente selbst befinden
Dies ist derzeit nicht möglich.
Wir könnten früher etwas dafür tun.
Gibt es darüber irgendwelche Neuigkeiten?
Hilfreichster Kommentar
Dies ist derzeit nicht möglich.
Wir könnten früher etwas dafür tun.