Nuxt Prose - cannot resize image
Hi all, I am dead stuck on this one and I can't figure out how to get it to work. I am trying to use markdown for rendering content, and displaying some images in my page. I found that there should be options for doing this just by adding some attributes in the .md file, but I can't get it to work and I am at a loss. Any help or suggestions would be appreciated
13 Replies
Hi @sans. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You are correct that in Nuxt Content, you can add images in your Markdown files and use attributes to modify their appearance. According to the documentation, you can add images to your
- Use
public/ directory and reference them in your Markdown like this:
For adding attributes (such as width or style), Nuxt Content supports an attribute syntax similar to inline components. For example:
or with inline style:
However, if you find that resizing via attributes like {width="300"} is not working, it may be due to how the Prose components are set up in your project. By default, Nuxt Content uses Prose components to render HTML tags generated by Markdown, and you can override these components if you need custom behavior. If the default <ProseImg> component does not respect the width attribute, you may need to customize it as described in the documentation:
- Copy the original component source.
- Place your customized version in components/content/ProseImg.vue.
- Ensure it uses the same props and handles the attributes as you expect.
You can read more about customizing Prose components here: Prose Components.
If you are using Nuxt UI, it also supports image attributes in Markdown, and the {width="300"} syntax should work out of the box. If you have @nuxt/image installed, <NuxtImg> will be used for better optimization, and the same attribute syntax applies. See: Images and Embeds.
Summary:- Use
{width="300"} or {style="width: 300px;"} after your image in Markdown.
- If it doesn't work, check if you need to customize the <ProseImg> component.
- Make sure your setup matches the documentation for either Nuxt Content or Nuxt UI, depending on what you use.
If you still have issues after these steps, please provide more details about your setup and any customizations you have made.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@387846353432215552> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
in-line style worked omg, that was the one thing I didn't try
okay this works on the page but it breaks the zoom functionality on click - when zoomed in the image stays at the fixed with @kapa.ai
Let me check the knowledge base for you again. One moment! :books:
----------------------
When you set a fixed width on an image using the
- Setting
{width="300"} attribute in Markdown with Nuxt UI Prose, it will indeed render the image at that width on the page. However, this also affects the zoom functionality: when you click to zoom, the image remains at the fixed width instead of expanding to its natural size in the modal overlay.
This behavior is expected because the width attribute is applied directly to the image, and the zoom overlay does not override or remove this style. The documentation confirms that images adapt to their container and that you can control sizing through attributes, but it does not mention any built-in way to have different sizing for the zoomed state versus the inline state. The zoom feature simply opens the same image with the same attributes in a modal overlay, so any fixed width will persist during zoomImages and Embeds – Nuxt UI.
If you need the image to be small inline but full-size when zoomed, the knowledge sources do not provide a built-in solution for this scenario. You may need to customize the Prose image component or the zoom overlay behavior, but there are no explicit instructions or examples for this in the provided documentation.
Summary:- Setting
{width="300"} will fix the image width both inline and in the zoom overlay.
- The knowledge sources do not describe a way to have different sizes for inline and zoomed images out of the box.
- Customization would be required, but no official guidance is provided in the sources.
If you need further help, you may want to look into customizing the Prose image component or the zoom overlay, but this goes beyond what is covered in the current documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@387846353432215552> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
ok yeah still looking for help please
@sans I don't know how to fix the zoom but when you use an image inline with nuxt content you're using mdc's
ProseImg component in the background. Here's the code:
https://github.com/nuxt-content/mdc/blob/main/src/runtime/components/prose/ProseImg.vue
You can also override this component to behave however you want by creating your own ProseImg.vue component. The ImageComponent imported from '#build/mdc-image-component.mjs' is just a NuxtImg.GitHub
mdc/src/runtime/components/prose/ProseImg.vue at main · nuxt-conte...
MDC supercharges regular Markdown to write documents interacting deeply with any Vue component. - nuxt-content/mdc
thank you for the info! how would I go about writing this override, is there a guide for it in the docs?
Yes! See here in the second paragraph: "To overwrite a prose component, create a component with the same name in your project components/content/ directory (ex:
components/content/ProseA.vue)."
https://content.nuxt.com/docs/components/proseoh wonderful, I'll give it a try and come back with updates, tysm
so in theory I could just replace the <template> bit with whatever I want my image to behave like
and copy paste the rest?
exactly!
sweet
If that for some reason doesn't work, let me know, good luck!!