Optimize images in markdown?

[saturnonearth]

Hi there,

How would I automatically optimize static images in markdown files on build?

[atinux]

It will be made as soon as we have a stable release of @nuxt/image.

[P4sca1]

@atinux How to use images in my content (v2) with @nuxt/image-edge (v1)?

[atinux]

You should be able to use:

:nuxt-img{src="/my-image.png"}

[P4sca1]

The problem is, that the component is not found. Do I need to register it globally or is there some way for nuxt to automatically import it?

[atinux]

Indeed the component is not registered globally here: https://github.com/nuxt/image/blob/v1/src/module.ts#L94-L97

Wondering if we could overwrite this with Nuxt Content to set it globally, WDYT @danielroe @pi0 ?

[P4sca1]

I don’t know if it is possible, but it would be great if nuxt auto import could work in .md files, like it does in single file components.

[atinux]

We could work on a parser to detect this but it is harder since not related to pages directly.

And I want the ability to have live preview in production when editing Markdown files.

One solution could be to flag component with a plugin as global I guess.

[hartmut-co-uk]

As far as I'm aware this is already in the process of being addressed and solved out of the box.

Until then here's how you can solve this:

Create following file at this exact path: components/content/ProseImg.vue
with content:

<template>
  <NuxtImg v-bind="$attrs" />
</template>

With that in place, images in your content xyz.md files, e.g.

### Basic usage
![](/images/cats/jiji.jpg)

### usage with additional nuxt-image props
![](/images/cats/fluffy.jpg){width="700",height="800",quality="80",sizes="xs:288 sm:352",preload}

Note: tested with @nuxt/image-edge:1.0.0-27821548.ab054e4

(I think this is going to be shipped by nuxt-image out of the with once official GA 1.0.0 some time soon)

[dosstx]

I have a use case for this. I see @hartmut-co-uk has a workaround. Before I test it, does anyone know if there have been any updates to the work flow of using Nuxt Image in markdown files? Has there been a release that addresses this issue? Or, is the consensus still to do the solution @hartmut-co-uk has provided? Thank you.

[jvolker]

I'm trying to use @hartmut-co-uk's workaround:

### usage with additional nuxt-image props
{width="700",height="800",quality="80",sizes="xs:288 sm:352",preload}

Unfortunately, for me, the additional nuxt-image props are being displayed as text and not parsed and forwarded to nuxt-image. I'm using @nuxt/image-edge:1.0.0-27821548.ab054e4.

What could be the reason for this? Thanks.

[nobkd]

@jvolker
Have you tried using spaces to separate the attributes instead of commas ,?
Like this:

- ![](imglink){width="700",height="800",quality="80",sizes="xs:288 sm:352",preload}
+ ![](imglink){width="700" height="800" quality="80" sizes="xs:288 sm:352" preload}

Reference: #2082 (comment)

[jvolker]

@jvolker Have you tried using spaces to separate the attributes instead of commas ,? Like this:

- ![](imglink){width="700",height="800",quality="80",sizes="xs:288 sm:352",preload}
+ ![](imglink){width="700" height="800" quality="80" sizes="xs:288 sm:352" preload}

Reference: #2082 (comment)

It worked. Perfect. Thank you!