Including Images from a Vue Library

Question

I am trying to publish a Vue library to npmjs and the library has a few images in it.

I publish the app to NPM, Import it into my main app and everything seems to function as expected, but the path to the images of the library are wrong and I can't seem to fix the link to them (I can see that the images are located in the node_modules folder of my library. Shouldn't my main vue app extract the images from the library when I run npm run serve?)

I tried to make a simplified demo of this problem to try to understand it.

In my Library, I created a really basic component

<div class="hello">
  <h1>{{ msg }}</h1>
  <img alt="Vue logo" src="@/assets/xlogo.png" />
  <img alt="Vue logo" :src="require('../assets/xlogo.png')" />
  <p>This is a paragraph.</p>
</div>

I then build the library with the following node command. (the command is in the package.json and I run it via npm run build:lib)

vue-cli-service build --target lib --name tmp ./src/components/index.vue

Then I try to import that library into my main vue app

import HelloWorld from '../../tmp/dist/tmp.umd.js' 

<template>
  <HelloWorld msg="Welcome to Your Vue.js App.."/>
</template>

I created a git repo to demonstrate this. So How would I go about changing it so the images are included in the library? Any pointers would be much appreciated as I have spent hours trying to figure this out on my own already :(

Answer 1

Sigh... this took waay longer to figure out than I would have liked.

I had to configure webpack to convert the images to base64. I guess the downside of this is that the package is larger because the images are packaged in the app code now, which is ok in my case as I only have a couple images anyway.

Steps to fix:

1: Install Url Loader

npm install --save-dev url-loader

2: Create a vue.config.js file and configure it so images are handled by the url loader

module.exports = {
      chainWebpack: (config) => {
        config.module
          .rule("images")
          .test(/\.(png|jpg|svg)$/i)
          .use("url-loader")
          .loader("url-loader")
          .tap(options => Object.assign(options, { limit: 10240 }));
      },
    }

Thats it. Also worth noting is that require did not work in the vue template itself.

<template>
  <div class="hello">
    <div><img src="~@/assets/logo.png" /></div> <!-- Working -->
    <div><img src="@/assets/logo.png" /></div> <!-- Working -->
    <div><img :src="imgPath" /></div> <!-- Working -->
    <div><img :src="require('../assets/logo.png')" /></div> <!-- Not Working -->
    <div><img :src="require('../assets/logo.png')" /></div> <!-- Not Working -->
  </div>
</template>

<script>
import imgPath from "@/assets/logo.png";

export default {
  setup() {
    return {
      imgPath,
    };
  },
};
</script>