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