コラム

[Vue.js]npmで公開したプラグインの画像が表示されない件

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,
        };
      });
  },
};
この記事をシェアする
  • Facebookアイコン
  • Twitterアイコン
  • LINEアイコン

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください

お客様のお悩みや不安、課題などを丁寧に、そして誠実にお伺いいたします。

お問い合わせはこちら
お電話でのお問い合わせ 03-5820-1777(平日10:00〜18:00)
よくあるご質問