- 03-5820-1777平日10:00〜18:00
- お問い合わせ
npmでプラグインを公開した際に、ローカルで表示されていた画像が表示されない現象が出ました。
解決策として、webpackの機能の一つのurl-loaderという機能を使用しました。
url-loaderを使用すると画像をDataURL(MIME Type + BASE64文字列)に変換しJSファイルにバンドルできます。
url-loadreはvue cliを使用できる環境なら使用できます。
「vue.config.js」というファイルを作成プロジェクトのルートディレクトリに作成し、以下の内容は記述するとurl-loaderを使用して表示できるようになりました。
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.test(/\.(png|jpg|gif|svg)/)
.use('url-loader')
.loader('url-loader')
.tap(options => {
return {
...options,
limit: undefined,
encoding: 'base64',
esModule: false,
};
});
},
};