Link to an image?

[joshuacurtiss]

I know this isn't a problem with VuePress per se, which is why I'm posting as a question/discussion, but what am I doing wrong? When using vuepress-webpack, I can have an image and it will properly get bundled but if I have a link to the image, the link is not pointing to the correctly bundled asset. How do I accomplish such behavior with vuepress-webpack?

To reproduce:

npm init -y
npm i -D -E [email protected]
wget https://github.com/vuepress/vuepress-next/raw/main/docs/.vuepress/public/images/hero.png
echo '# Test\n\nClick the link to the [logo](./hero.png).\n\n![](./hero.png)' > README.md
npx vuepress dev . --open

The image is properly bundled and displayed but the link to the same asset is not.

Thanks,
Josh

[Mister-Hope]

So do you have any issue accessing this page? And what's the confusion?https://v2.vuepress.vuejs.org/guide/assets.html

[joshuacurtiss]

I already know the file can be moved into public. Are you implying VuePress 2 and Webpack 5 can't handle a link to an image unless it's in public directory? You see in reproduce steps there is link to image that doesn't work.

[Mister-Hope]

You can reference any assets using relative URLs

![An image](./image.png)

This is generally the suggested way to import images, as users usually place images near the Markdown file that references them

---

You can put some static assets inside public directory,

You may want to reference images using absolute URLs in your Markdown content.

![VuePress Logo](/images/hero.png)

SO TELL ME, have you read this lines and do you have any TROUBLE understanding them?

[joshuacurtiss]

Thank you Mister, I do understand these instructions, and my repro has an example like that. Please know I thought this would be a question others may have who are using VuePress. What about this:

[link](./image.png)

I'm asking if this is possible, with images residing the markdown files, not in the public directory.

I'm asking why ![](./image.png) will identify the file as an asset and the image src is changed to /asets/img/image.a6cb7ae6.png but [link](./image.png) will not, and can it.

[Mister-Hope]

Then you should have a search how spa work.

Morden frondend Framework all work as spa by default for vue, react and angular.

VuePress is default using vite and for both vite and webpack, entry is something controlling the output entrance. Everything inside assets is the resources for entries.

[Mister-Hope]

I thought the react reference already gives you answer, when you require an image, webpack actually give you filepath of the image through url-loader, do vite. however webpack and vite does not handle links and treat them as is by default. You can create a new vite/webpack project and try to link a image with <a href=./image"> and try to place that image next to it, I am sure it wouldn't work, because only index.html is the default entry and would be generated as /dist/index.html
Also vuepress use vite by default

[Mister-Hope]

Read these to understand the basic public concerpt in frontend area (you are acting you do not)

Webpack:

• https://webpack.js.org/plugins/copy-webpack-plugin/

Vite:

• https://vitejs.dev/guide/assets.html#the-public-directory

Vue Cli:

• https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Smilar tools:

• vitepress: https://vitepress.vuejs.org/guide/asset-handling#public-files

Other ecosyterm:

• react: https://create-react-app.dev/docs/using-the-public-folder
• docusaurus :https://docusaurus.io/docs/static-assets#in-markdown

Also just to make it clear, nobody maintaining this repo are expecting to answer noob questions like this. Go to stackoverflow, vue forum or other places. There is no techical support here, and we are willing to and ONLY willing to give you tips about vuepress itself. If you do not know any basic concerpt in our reply and docs which is not related to vuepress but about the base vuepress rely on, learn them yourself and try not let us explain them.

I will omit any further questions from you which is about other things which are not actually related to vuepress , yet should be asked in othe places.

[cdauth]

The question is not a “noob question” at all, and obviously the documentation is incomplete in this regard. If it is indeed the case that relative URLs are only supported for Markdown images, but not for Markdown links, then I think that should be mentioned in the documentation.

Also, what the hell is the purpose of this discussion forum if it is not asking questions about the software that are not answered in the docs?

[Mister-Hope]

Again, the documentation does not supposed to add ALL CONTENTS of Webpack and Vite.

As long as our behavior is aligning with "A normal app using same bundler", then no extra talk should be added in the documentation.

If you insist, then I would ask, why don't we start with "how to type characters" "how to install nodejs" "what's markdown" "what's website".

You can see that I ask politely in my first reply:

So do you have any issue accessing this page? And what's the confusion?https://v2.vuepress.vuejs.org/guide/assets.html

If you write <a href="./links/"></a> in a normal vite/webpack app with vue and react router, they won't handle the link either, so that's the basic problem. This kind of question or confusion is reasonable, but not related to the project. Go to stackoverflow, vue forum or anywhere similar should help.

Our project is built on the top of other projects, and we do welcome users to ask questions about our project, but if a problem is about the projects below, then it's reasonable for us to point out those project docs and told you to solve it there.

While you are asking these kind of questions in our discussion panel, then you are actually requesting an open source developer to teach or help you with another tool, which can be considered as "out of scope".

Is my description clear enough?

[cdauth]

A normal app using webpack/vite does not support Markdown at all, so this is not something that a regular user of those bundlers would know about nor find in their documentation. On the other hand, in a normal app using webpack/vite I can simply import the image file, which gives me the URL, and this does not seem to work in vuepress. Also, vuepress itself does support relative references in Markdown files to other files in the same directory, for example linking to other Markdown files or embedding image files. So it is obvious that a user would expect the same thing to work for linking to image files. The fact that this apparently doesn't work is a specific property of vuepress's webpack/vite configuration, not of those bundlers themselves. Also, using vuepress feels more like writing a static website in Markdown rather than developing an SPA, so it is a reasonable assumption that linking to files in the same directory would work as it does in every other tool that allows you to create a website using Markdown files.

So I think this issue is very much related to vuepress. I would consider it a bug or at least a missing feature, and if it is a deliberate decision that this does not work, I would expect it to be mentioned in the docs.

Regarding your point that by raising a question here one is “requesting an open source developer”, no one is asking or forcing you personally to respond to this question. Any contributor or user of vuepress is welcome to share their insights. Also, if I asked about this in any webpack or vite or vue forum, people would immediately send me back here, because it is a question that is impossible to answer without knowing the internals of how vuepress is using those tools.

[meteorlxy]

Some personal thoughts:

• Our target users are not required to be familiar with other tools, and even not required to be a frontend developer. Ideally they might only know how to write markdown and then they can use vuepress following the step by step guide. As maintainers, we are likely to miss something in the documentation that is "obvious" to advanced users, but not to new users.
• We allow noob questions in the discussion panel for sure. If we think it's too noob and don't want to answer, we can ignore it. It makes no sense to tell them "Don't ask noob questions like this!".