次のような画像をインポートできるようにしたい:
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エラーが発生します。
何か案は?
ps。 ファイルを手動でstatic
フォルダーに移動したくありません。 あるコンポーネントに関連する画像をコンポーネント自体と同じフォルダに入れたい `
最も参考になるコメント
現在、これは不可能です。
私たちはこれのためにもっと早く何かをするかもしれません。