-
-
Notifications
You must be signed in to change notification settings - Fork 624
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
nuxt-image
integration
#911
Comments
@LukaHarambasic Just add a custom rehype plugin. As 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 In the above code, the person has also added a new component called If you don't want to create this new component, then, just replace "content-img" with "nuxt-img". But, personally, using |
@ManasMadrecha thanks a lot! That was exactly what I was looking for! I directly implemented it: LukaHarambasic/harambasic.de#42
I'm quite happy with |
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.
The text was updated successfully, but these errors were encountered: