Asset links in components

[pragdave]

I wrote a component that lets me caption an image like this:

<ImgCaption title="A trash can" src="./images/trash.jpg">
  Photo by <a href="https://unsplash.com/@pawel_czerwinski">Pawel Czerwinski</a> 
  on <a href="https://unsplash.com/s/photos/trash">>Unsplash</a>
</ImgCaption>

The document containing this is in docs/posts, and the image is in the directory docs/posts/images. It works fine if I include it using

![](./images/trash.jpg)

Now, I know that this is really a Vuepress issue, but @source doesn't seem to be supported in theme-hope. I must be missing something obvious, but what???

My component looks like:

<template>
  <figure>
    <img :src="src" :title="title">
    <figcaption>
      <slot></slot>
    </figcaption>
  </figure>
</template>
<script>
  export default {
    props: [ 
      "src", "title"
    ],
  }
</script>

[Mister-Hope]

Sorry, I just see this discussion, I will check it out now.

[Mister-Hope]

1. VuePress Theme Hope does not edit any related logic about the internal assetPlugin in @vuepress/markdown, so I think if you are passing the correct alia for the image (e.g.: @source/path/to/image.png), everything should work fine, if not, and you are sure that the default theme support same syntax, open a new issue with a minimal reproduction link and I would like to check it.

2. I do not recommend you to make a component to wrap your images if this component is commonly used. If so, you probably need to write a markdown-it plugin of your own, to support same render result of your current component.

[pragdave]

In case anyone else comes across this, I ended up solving it with

    ['@vuepress/plugin-container', { 
      type: 'caption', 
      before: (src: string) => {
        return `<figure class="with-caption">\n<img src="${src}"/>\n<figcaption>`
      },
        after: (_: any) => '</figcaption></figure>',
    }],

So you'd use it like this:

::: caption @source/posts/images/Rubber_duck_assisting_with_debugging.jpg
By Tom Morris (Own work)
[CC-BY-SA-3.0](http://creativecommons.org/licenses/by-sa/3.0) or [GFDL](http://www.gnu.org/copyleft/fdl.html), via Wikimedia Commons
:::

(I couldn't get it work with relative paths...)

[Mister-Hope]

That’s a nice hack