Got it, let's get those PNG/SVG images showing up as inline Base64 in your reusable Vue 2 component. The issue is that your current Webpack setup isn't processing those image assets correctly—here's exactly how to configure vue-loader and url-loader to fix this:

First, Install Required Dependencies #

Make sure you have all the necessary packages installed. Run this in your project root:

npm install vue-loader vue-template-compiler url-loader file-loader --save-dev

(Note: For Vue 2, stick with vue-loader@15.x—the latest version is built for Vue 3 and won't work here.)

Configure webpack.config.js #

Here's a complete, minimal Webpack config tailored to your needs. Replace or merge this with your existing config:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  entry: './src/your-component-entry-file.js', // Update this to your component's actual entry file
  output: {
    filename: 'your-component-bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'YourComponentName', // Name for your reusable component export
    libraryTarget: 'umd' // Makes the component work across different module systems (CommonJS, AMD, global)
  },
  module: {
    rules: [
      // Handle .vue single-file components
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false // Optional: cleans up unnecessary template whitespace
          }
        }
      },
      // Process image assets into Base64 or files
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // Convert images < 8KB to Base64; larger ones stay as separate files
              name: '[name].[hash:7].[ext]', // Optional: naming pattern for non-inlined images
              esModule: false, // Critical! Vue templates expect CommonJS module format here
              outputPath: 'assets/' // Optional: directory for non-inlined image output
            }
          }
        ]
      },
      // Optional: Handle component styles if needed
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // Required to make vue-loader work properly
    new VueLoaderPlugin()
  ],
  resolve: {
    // Optional: Add alias for cleaner, more reliable asset paths
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.vue', '.js']
  }
};

Key Details to Keep in Mind #

• esModule: false: This is non-negotiable. Without it, Vue's template compiler will receive an ES module object instead of the raw image URL/Base64 string, leading to broken image references.
• limit: Adjust this value (in bytes) based on your needs. Any image smaller than this threshold will be inlined as Base64; larger ones will be emitted as separate files (still correctly referenced in your component).
• Asset Paths: If you use the @ alias, you can update your template's image reference to <img src="@/assets/search.png" />—this makes paths more consistent across different project setups.

Test the Setup #

1. Run your build command (e.g., webpack or the script defined in your package.json)
2. Check the bundled component: the src attribute of your <img> tag should now be a Base64 string for images under your set limit.

Troubleshooting Tips #

• If images still don't show up, double-check your file paths—ensure the assets folder is in the correct relative location to your component file.
• Verify you've installed the correct version of vue-loader (15.x for Vue 2). Run npm list vue-loader to confirm.

内容的提问来源于stack exchange，提问作者Kirk Olson