nuxt-image integration

[LukaHarambasic]

Is your feature request related to a problem? Please describe.

I would like to use the default markdown image syntax (![]()), but still benefit from https://github.com/nuxt/image.

Describe the solution you'd like

Add a nuxt-image integration for markdown files and add a flag to enable it.

Describe alternatives you've considered

Currently, I'm using <nuxt-picture> directly in my markdown files. It works but adds a dependency to nuxt, and I'm just a big fan of writing plain Markdown as much as possible (example).

Additional context

If #705 gets implemented, this would be easy to implement on my own, but I still think an in-house solution strengthening the nuxt eco-system would be preferable.

[ManasMadrecha]

@LukaHarambasic
You can still do it using this #106 (comment)

Just add a custom rehype plugin. As ![]() syntax is actually converted to <img/>, so in that plugin, you can convert all such <img/> tags to <nuxt-img> tags. The above link shows how to do this.

It's as easy as this:

const visit = require("unist-util-visit");

module.exports = function nuxtContentImages() {
  // console.log(info)
  return function transformer(tree, file) {
    visit(tree, "element", visitor);

    function visitor(node) {
      if (node.tagName === "img") {
        node.tagName = "content-img";
        // console.log('rehype:', 'img -> content-img', node.properties.src)
      }
    }
  };
};

All credits to: https://codesandbox.io/s/nuxt-content-image-9pb11?file=/plugins/rehype-content-image.js:0-398

And then, just register it in nuxtconfig.js inside content object's markdown's rehype plugins.

In the above code, the person has also added a new component called content-img, wherein you can add border, caption (with slot), open modal on clicking the image, etc.

If you don't want to create this new component, then, just replace "content-img" with "nuxt-img".

But, personally, using ![]() syntax is very less useful, as you can't even add anything other than alt in it like width or height. So, what you can do is add the above rehype plugin and use normal HTML <img> tag syntax. This way your docs will not be dependent on Nuxt, but at the same time, the images will be optimized with nuxt-img.

[LukaHarambasic]

@ManasMadrecha thanks a lot! That was exactly what I was looking for! I directly implemented it: LukaHarambasic/harambasic.de#42

But, personally, using syntax is very less useful, as you can't even add anything other than alt in it like width or height. So, what you can do is add the above rehype plugin and use normal HTML tag syntax. This way your docs will not be dependent on Nuxt, but at the same time, the images will be optimized with nuxt-img.

I'm quite happy with ![]() and never set a width or height :)