\r\n title: Feature A\r\n details: Lorem ipsum dolor sit amet, consectetur adipiscing elit\r\n```\r\n\r\nCheck the feature icon type\r\n```ts\r\ntype FeatureIcon =\r\n | string\r\n | { src: string; alt?: string; width?: string; height: string }\r\n | {\r\n light: string\r\n dark: string\r\n alt?: string\r\n width?: string\r\n height: string\r\n }\r\n```\r\n\r\nI refer to the render logic, use `v-html` render the icon.\r\nDisplay well in `dev` environment, but shows errors in `prod` environment.\r\n\r\n| dev | build |\r\n| ----------- | ----------- |\r\n|  |  |\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/zyyv/vitepress-unocss-issue\r\n\r\n- Display right run `pnpm dev`\r\n- Display error run `pnpm build && pnpm preview`\r\n\r\n### Expected behavior\r\n\r\nDev and build behave the same\r\n\r\n### System Info\r\n\r\n```Text\r\nlatest\r\n```\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\r\n\r\n- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\r\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\r\n- [X] Read the [docs](https://vitepress.dev).\r\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3048,3051,3054],{"name":3049,"color":3050},"build","377ba8",{"name":3052,"color":3053},"has-workaround","1B4515",{"name":3024,"color":3025},4045,"SSR in dev for more consistent output in dev and prod","2025-03-02T18:08:58Z","https://github.com/vuejs/vitepress/issues/4045",0.7445565,{"description":3061,"labels":3062,"number":3064,"owner":3027,"repository":3028,"state":3029,"title":3065,"updated_at":3066,"url":3067,"score":3068},"Dear vitepress community,\r\n\r\nI am new to vitepress and trying to create a overview page of contents from all entries in my page. \r\nThe problem is that I seem to unable to link the images in the right way, so that it works when it gets built. \r\n\r\nI am running this script to extract data from the markdown files:\r\n\r\n```\r\nconst matter = require('gray-matter')\r\nconst fs = require('fs')\r\nconst path = require('path')\r\n\r\nexport default {\r\n watch: ['../../submissions/**/*.md'],\r\n load(watchedFiles) {\r\n // watchedFiles will be an array of absolute paths of the matched files.\r\n // generate an array of blog post metadata that can be used to render\r\n // a list in the theme layout\r\n \r\n return watchedFiles.map((filePath) => {\r\n const segments = filePath.split('/')\r\n const typeFolder = segments[segments.length - 3];\r\n const subFolder = segments[segments.length - 2];\r\n const path = \"/\"+typeFolder+\"/\"+subFolder+\"/\";\r\n // const slug = segments[segments.length - 2] + '/'\r\n const slug = segments[segments.length - 2]\r\n const parsed = matter(fs.readFileSync(filePath, 'utf8'))\r\n const images = findImageFilesSync(filePath)\r\n return { 'slug': slug, images, ...parsed.data, path }\r\n })\r\n }\r\n}\r\n\r\nfunction findImageFilesSync(mdFile) {\r\n const folderPath = path.dirname(mdFile)\r\n const allowedExtensions = ['.png', '.jpg', '.jpeg', '.gif'];\r\n try {\r\n const files = fs.readdirSync(folderPath);\r\n const imageFiles = files.filter(file => {\r\n const ext = path.extname(file).toLowerCase();\r\n return allowedExtensions.includes(ext);\r\n });\r\n return imageFiles;\r\n } catch (err) {\r\n console.error('Error:', err);\r\n return [];\r\n }\r\n}\r\n```\r\n\r\nAfter I am accessing the information in a overview VueJS page like this:\r\n\r\n```\r\n\u003Cscript setup>\r\nimport { data as submissions } from './subs.data.js'\r\nsubmissions.sort((a, b) => a.sort - b.sort)\r\n\u003C/script>\r\n```\r\n\r\nI get the URL for the images, but once built, they change location of course and get a hash and I am struggling to figure out how to get the images.\r\n\r\nIs there any hint for me? \r\n\r\nThanks,\r\nAlex\r\n\r\n",[3063],{"name":3024,"color":3025},2999,"Creating an overview of all images in markdown files","2023-11-06T14:44:01Z","https://github.com/vuejs/vitepress/issues/2999",0.7502774,{"description":3070,"labels":3071,"number":3076,"owner":3027,"repository":3028,"state":3077,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Is your feature request related to a problem? Please describe.\n\nrepresenting the steps in a very clear way.\n\n### Describe the solution you'd like\n\nproviding a \"Steps\" markdown extension\n\n### Describe alternatives you've considered\n\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[3072,3073],{"name":3049,"color":3050},{"name":3074,"color":3075},"theme","0754FB",3159,"closed","feat: adding the \"Steps\" markdown extension","2023-12-27T00:04:27Z","https://github.com/vuejs/vitepress/issues/3159",0.72930706,{"description":3083,"labels":3084,"number":3088,"owner":3027,"repository":3028,"state":3077,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Describe the bug\n\nWhen using \r\n```\r\nthemeConfig: {\r\n\t\tlogo: '/logo-Wikimedia.svg'\r\n}\r\n```\r\nthe `img` output doesn't feature an `alt` attribute required for screenreaders. \r\nEither a duplication of the title or better a required `logoAlt` key would be useful.\n\n### Reproduction\n\nGo to https://doc.wikimedia.org/codex/main/ and inspect the source:\r\n`\u003Cimg class=\"VPImage logo\" src=\"/codex/main/logo-Wikimedia.svg\" data-v-d5fed348=\"\">`\n\n### Expected behavior\n\n`img` tags need to feature an `alt` attribute to be valid HTML. Starting with an empty one and providing an option to define the value would be necessary.\n\n### System Info\n\n```shell\nVitePress 1.0.0-alpha.10\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3085],{"name":3086,"color":3087},"docs","0075ca",1309,"themeConfig logo option results in an `img` output without `alt` attribute","2023-01-21T14:25:29Z","https://github.com/vuejs/vitepress/issues/1309",0.73330265,{"description":3094,"labels":3095,"number":3096,"owner":3027,"repository":3028,"state":3077,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Is your feature request related to a problem? Please describe.\n\nN/A\n\n### Describe the solution you'd like\n\nAllow custom titles of containers to be manipulated with Markdown, such as **bold**, _italics_, or hyperlinks.\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],765,"Markdown formatting in custom container titles","2023-01-21T14:34:10Z","https://github.com/vuejs/vitepress/issues/765",0.74040663,{"description":3102,"labels":3103,"number":3105,"owner":3027,"repository":3028,"state":3077,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Describe the bug\n\n`\u003CVPSponsorsGrid>` is flagged as \"Image elements have [alt] attributes that are redundant text.\" by lighthouse.\n\n> **Image elements have [alt] attributes that are redundant text.**\n> Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusing for screen reader users, because the text will be read twice. [Learn more about the alt attribute](https://dequeuniversity.com/rules/axe/4.10/image-redundant-alt).\n\nI think any of the following should be done:\n\n- remove `\u003Ch4 class=\"visually-hidden\">{{ sponsor.name }}\u003C/h4>`\n- add `aria-hidden=true` to `\u003Ch4 class=\"visually-hidden\">{{ sponsor.name }}\u003C/h4>`\n- change `alt` of `\u003Cimg class=\"vp-sponsor-grid-image\" ...>` to empty\n\n### Reproduction\n\nhttps://vite.dev/ (Top page sponsor section)\n\nhttps://github.com/vuejs/vitepress/blob/52f0eaa0849344aa45efbf7258a6287597e55a9a/src/client/theme-default/components/VPSponsorsGrid.vue#L38-L43\n\n\n### Expected behavior\n\nIt is not flagged by lighthouse.\n\n### System Info\n\n```Text\nSystem:\n OS: Linux 6.6 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)\n CPU: (32) x64 AMD Ryzen 9 9950X 16-Core Processor\n Memory: 15.74 GB / 23.46 GB\n Container: Yes\n Shell: 5.2.21 - /bin/bash\n Binaries:\n Node: 22.16.0 - ~/.local/share/asdf/data/installs/nodejs/22.16.0/bin/node\n npm: 10.9.2 - ~/.local/share/asdf/data/plugins/nodejs/shims/npm\n pnpm: 10.13.1 - ~/.local/share/asdf/data/installs/nodejs/22.16.0/bin/pnpm\n bun: 1.2.17 - ~/.local/share/asdf/data/shims/bun\n npmPackages:\n vitepress: ^2.0.0-alpha.8 => 2.0.0-alpha.8\n```\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [x] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).\n- [x] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [x] Read the [docs](https://vitepress.dev).\n- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3104],{"name":3038,"color":3039},4854,"`\u003CVPSponsorsGrid>` is flagged as \"Image elements have [alt] attributes that are redundant text.\" by lighthouse","2025-07-25T05:26:02Z","https://github.com/vuejs/vitepress/issues/4854",0.7421595,{"description":3111,"labels":3112,"number":3114,"owner":3027,"repository":3028,"state":3077,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Describe the bug\n\nI configure the anchor level of markdown, which does not take effect\n\n### Reproduction\n\nI configure the anchor level of markdown, which does not take effect\n\n### Expected behavior\n\nI configure the anchor level of markdown, which does not take effect\r\n\u003Cimg width=\"265\" alt=\"image\" src=\"https://user-images.githubusercontent.com/73089592/210925066-a8c5b645-0e09-4410-a575-a062d4aeff2f.png\">\r\n\n\n### System Info\n\n```shell\nmacOS chrome\n```\n\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.vuejs.org).\n- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.",[3113],{"name":3038,"color":3039},1765,"Haven't the markdown.anchor option been supported yet?","2023-01-21T14:16:41Z","https://github.com/vuejs/vitepress/issues/1765",0.7439607,{"description":3120,"labels":3121,"number":3122,"owner":3027,"repository":3028,"state":3077,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Is your feature request related to a problem? Please describe.\n\n在最新的版本中,如何给Markdown文件中的图片添加点击缩放功能呢?\r\n \"vitepress\": \"1.0.0-rc.14\"\n\n### Describe the solution you'd like\n\n \"vitepress\": \"1.0.0-rc.14\"\n\n### Describe alternatives you've considered\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)\n- [X] Read the [docs](https://vitepress.dev).\n- [X] Read the [Contributing Guidelines](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md).\n- [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.",[],3064,"how to Allow images to be zoomed in on click","2023-10-19T00:04:19Z","https://github.com/vuejs/vitepress/issues/3064",0.7477781,["Reactive",3128],{},["Set"],["ShallowReactive",3131],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdtzLR3obMuYmk_CT9ianrEXq7QXzULnwzopWDDWAeZw":-1},"/vuejs/vitepress/892"]