How to resolve assets routes in images

[asanzdj]

Version

5.0.0

Reproduction link

https://codesandbox.io/embed/vue-template-3qsli

Steps to reproduce

Try the library: https://www.npmjs.com/package/daas-components

What is expected?

I'm trying to create a components library with rollup and vue, I have components with images storaged in an assets folder.

Objective:: When library is used in a project, images must be loaded.

What is actually happening?

Images are concatenating the app url path in their own path.

Resulted images::

Request URL: http://localhost:8080/APP_ROUTE/ROUTE_IM_TRYING/close.svg

---

I read about transformAssetUrls(https://rollup-plugin-vue.vuejs.org/options.html#template-transformasseturls) but I can't understand what is its objective and how is used.

[HiraveBapu]

I had same issue, and tried multiple ways to solve it. rollup-plugin-asset-url was life saver.

in rollup.config.js

import url from 'rollup-plugin-asset-url'

plugins:

    url({
      limit: 5 * 1024, // inline files < 5k, copy files > 5k
      include: ['**/*.png', '**/*.ttf'],
      fileName: '[name][extname]',
      output: './static/',
      reserveImportInJs: true,
    }),

[znck]

As @engblh suggested.

[rdunk]

@asanzdj Did you find a solution for this? The suggested one here doesn't seem to work for me.

[djeikyb]

@znck can this be reopened? There is no comment from an account named engblh. Maybe the name changed or the comment was deleted? I have zero knowledge of rollup. I'm so newb I can't tell the difference between rollup knowledge and rollup-plugin-vue knowledge. How could someone familiar with creating and maintaining a vuejs 2.6 app – but not rollup or webpack etc – use this plugin to extract some single file components along with their static assets to a reusable component library?

[kovaletsyurii]

I had same issue, and tried multiple ways to solve it. rollup-plugin-asset-url was life saver.

in rollup.config.js

import url from 'rollup-plugin-asset-url'

plugins:

    url({
      limit: 5 * 1024, // inline files < 5k, copy files > 5k
      include: ['**/*.png', '**/*.ttf'],
      fileName: '[name][extname]',
      output: './static/',
      reserveImportInJs: true,
    }),

Not working for me

[aranoe]

Doesn't work for me either.

[alexander-rodin]

the problem is relevant the me