Utilizing Visuals from a Vue Component Collection

Question

Utilizing Visuals from a Vue Component Collection

As I attempt to publish a Vue library to npmjs, I encounter an issue with the images within it.

After publishing the app to NPM and importing it into my main app, everything appears to be working correctly. However, the paths to the images in the library are incorrect, and I am unable to fix them (I notice 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?)

To better understand this problem, I have created a simplified demo.

Within my Library, I have developed a 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 using the following node command (the command is specified in the package.json, and I execute it via npm run build:lib):

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

Subsequently, I import the library into my main vue app:

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

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

To illustrate this issue, I have set up a GitHub repository. How can I resolve this so that the images are included in the library? Any guidance would be greatly appreciated, as I have dedicated hours trying to solve this on my own already :(

javascript vue.js npm package.json vue-cli

Answer 1

Answer №1

Ugh... it took much longer than I expected to solve this issue.

I had to set up webpack to convert the images into base64 format. The downside is that the app package becomes larger because the images are now included in the code, but since I only have a few images, it's not a big deal for me.

Here's how to fix it:

1: Install Url Loader

npm install --save-dev url-loader

2: Create a vue.config.js file and configure it to use the url loader for images

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 }));
      },
    }

That's all. Note that using require directly in the vue template did not work.

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

Answer 2

Ugh... it took much longer than I expected to solve this issue.

I had to set up webpack to convert the images into base64 format. The downside is that the app package becomes larger because the images are now included in the code, but since I only have a few images, it's not a big deal for me.

Here's how to fix it:

1: Install Url Loader

npm install --save-dev url-loader

2: Create a vue.config.js file and configure it to use the url loader for images

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 }));
      },
    }

That's all. Note that using require directly in the vue template did not work.

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

Utilizing Visuals from a Vue Component Collection

Answer №1

Similar questions

Different ways to set the depth parameter in npm

Utilizing adapter headers in contexts other than ActiveModelAdapter

npm build is encountering an issue where the Class it is extending has a value of undefined, which is neither

Is jQuery failing to correctly validate the RadioButtonList?

Error message on Android Web Console: ReferenceError - Worker object is not defined

What is the reason for the prefixing of dependencies in package.json with @polymer?

Error occurred during Apple Login using Next_Auth: OAuthCallback issue

You may encounter an error stating "Property X does not exist on type 'Vue'" when attempting to access somePropOrMethod on this.$parent or this.$root in your code

How can I implement a Dynamic Input field using Angular?

Adding an image to a React component in your project

Module 'framer' missing even after removing node modules directory

Refresh a selection menu using a checkmark

Loading elements of a webpage in a consecutive order

Ways to retrieve the most recent state in a second useEffect call?

To make table headers remain stationary as the data scrolls with JavaScript

Can I apply a universal babel configuration across all of my personal projects?

What are the reasons for the failure of parsing this specific Twitter JSON file using Angular $http, and how can I troubleshoot and resolve the issue

Utilizing Vue's dynamic component feature to create event listeners

The HTML document requests information from a JSP file

The then() function in Node.js is triggered before the promise is fully resolved