htmlvue.jsvitepress

open Images in a new Tab in Vitepress production build


I would like to open images in Vitepress in a new tab because of some pictures which has fine details. I tried to wrap the image Link with a pointing to the same resource. Unfortunately or fortunately vitepress copies the asset with a hashed file name in the production build. With that hashed file name the resource of the link is going in to a 404.

![Random Image](./img/img01.png)

I tried to open the image in a new tab this way:

<a href="./img/img01.png" target="_blank">![Random Image](./img/img01.png)</a>

Is there a possibility to reference the hashed images or is there another way to solve this?

Thanks in advance!


Solution

  • I believe this issue is because you are not hosting your images in the public folder. Please consider moving your images to /public/img/ instead of /src/img. Then you can update your links to not include the relative path ./ and instead you can link to the public image.

    <a href="/img/img01.png" target="_blank">![Random Image](/img/img01.png)</a>