Relative image links with Vue + Quasar + Webpack

[jackm]

I am currently working on integrating quasar-ui-qmarkdown into my existing Vue3 + Quasar2 app. I use Vue CLI (not Quasar CLI) and Webpack to bundle everything together. It is very desirable that I be able to import markdown files to render them and not use the default slot to hold the markdown content - this is due to linting errors and issues with whitespace and linebreaks being stripped by Vue.

I've run into a roadblock when it comes to displaying images however. I would like to be able to use the Webpack resolve alias (i.e. @) or something similar to point to images relative to my application's source. The problem is that when markdown is rendered it keeps the image links as-is. I assume I need some sort of pre or post processing of the markdown file to transform the links. Is there a solution for this?

[hawkeye64]

I don't have an immediate solution for this. But, yeah, you will probably need your own webpack processing.

[jackm]

I ended up using markdown-image-loader in my Webpack config as a new rule when processing any markdown file.

Now I can default import any markdown files and use their content in the markdown renderer. The Webpack loader handles translating any image paths to their appropriate URLs in the final compiled app.