Π― Ρ ΠΎΡΡ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ:
import image from './image.png; // image variable should have static url
ΠΠΎΠΉ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ ( 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;
},
};
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΠΎΡΡΠΈ Ρ ΠΎΡΠΎΡΠΈΠΉ.
Π€Π°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png
image
ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ /static/images/image-ef89065b898bb1e3e802c62e4b264417.png
, Π½ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png
Ρ ΠΏΠΎΠ»ΡΡΠ°Ρ ΠΎΡΠΈΠ±ΠΊΡ 404.
ΠΡΠ±ΡΠ΅ ΠΈΠ΄Π΅ΠΈ?
ΠΏΡ. Π― Π½Π΅ Ρ
ΠΎΡΡ Π²ΡΡΡΠ½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ°ΠΉΠ»Ρ Π² ΠΏΠ°ΠΏΠΊΡ static
. Π― Ρ
ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, Π½Π°Ρ
ΠΎΠ΄ΠΈΠ»ΠΈΡΡ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ ΡΠ°ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π½ΡΡΠ΅.
ΠΡΡΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠΎΠ²ΠΎΠ΄Ρ?
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ°Π½ΡΡΠ΅.