3

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 :(

user2835033
  • 73
  • 4
  • I'm not sure if this issue is related or not, but have you checked this? I think it's quite similar: https://stackoverflow.com/questions/45321386/npm-module-missing-files-after-publish – artikandri May 16 '22 at 20:25
  • Thanks for the response @artikandri. When I publish my app to npm, the images are there alongside the common.js and umd.js files, so I don't think its a case that the the images are missing. – user2835033 May 16 '22 at 20:33

1 Answers1

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>
user2835033
  • 73
  • 4