\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nconst dynamic_image_name = 'zero-config.svg';\r\n\u003C/script>\r\n```\r\n\r\nthen this is rendered as \r\n```html\r\n\u003Cimg src=\"~/assets/zero-config.svg\" alt=\"Discover Nuxt 3\">\r\n```\r\nwithout correctly resolving (and copying) the image, thus it doesn't show in the browser.\n\n### Additional context\n\nRefs https://github.com/nuxt/framework/pull/6635.\n\n### Logs\n\n_No response_",[2867,2870],{"name":2868,"color":2869},"documentation","5319e7",{"name":2871,"color":2872},"dx","C39D69",14766,"nuxt","open","Assets with dynamic names are not resolved","2025-01-11T09:07:17Z","https://github.com/nuxt/nuxt/issues/14766",0.7200753,{"description":2881,"labels":2882,"number":2886,"owner":2874,"repository":2887,"state":2875,"title":2888,"updated_at":2889,"url":2890,"score":2891},"Hi there, thanks for the cool module.\r\n\r\nI was wondering if it is possible to nest custom SVG icons inside folders? \r\n\r\n**Editing OP to make it more clear:**\r\n\r\n--- \r\n\r\nAfter some experimenting with the playground in the repo I understand the intended pattern now.\r\n\r\n1. Default pattern\r\n\r\n```js\r\n// Assuming: `components/global/MyIcon.vue`\r\n\r\n\u003CIcon name=\"MyIcon\" /> \r\n```\r\n\r\n2. If you want to have `\u003CIcon>` load an **SFC** that is nested in folders - that's easy:\r\n\r\n```js\r\n// Assuming: `components/global/CoolStuff/MyIcon.vue`\r\n\r\n\u003CIcon name=\"CoolStuffMyIcon\" /> \r\n```\r\n\r\n3. However, if you have an elaborate set of custom icons (`.svg` extension) that are organized in folders, you would currently need an individual `.vue` icon to go along with every single one.\r\n\r\n```js\r\n// Assuming: `{public|assets}/icons/brand/MyIcon.svg\r\n// Assuming: `components/global/icons/brand/MyIcon.vue`\r\n\r\n// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg\r\n// Assuming: `components/global/icons/brand/MyOtherIcon.vue`\r\n\r\n\u003CIcon name=\"IconsBrandMyIcon\" />\r\n\u003CIcon name=\"IconsBrandMyOtherIcon\" />\r\n\r\n// etc.\r\n```\r\n\r\nThis means you need to manage a folder of SVGs as well as their matching SFCs. \r\n\r\nIs there a solution?",[2883],{"name":2884,"color":2885},"enhancement","a2eeef",75,"icon","Feature request: A way to manage custom SVGs that are nested inside folders.","2023-08-07T11:42:42Z","https://github.com/nuxt/icon/issues/75",0.7291449,{"description":2893,"labels":2894,"number":2898,"owner":2874,"repository":2874,"state":2899,"title":2900,"updated_at":2901,"url":2902,"score":2903},"If I reference a SVG assets, e.g. `~/assets/svg/list.svg` using an `\u003Cobject>` or `\u003Cembed>`, vue-loader does not resolve the path. If use an `\u003Cimg>` tag, everything is fine.\r\n\r\nOutput:\r\n`\u003Cobject src=\"~/assets/svg/list.svg\">\u003C/object>`\r\n\r\n`\u003Cimg src=\"/_nuxt/img/list.e48b737.svg\">`\r\n\r\nSteps to reproduce:\r\n\r\n1. Create a page (`whatever.vue`) in the `pages` folder\r\n2. Create a `\u003Ctemplate>` in `whatever.vue`\r\n3. Download the attached ZIP file and extract it into the `assets` folder. [svg.zip](https://github.com/nuxt/nuxt.js/files/1469286/svg.zip)\r\n4. Inside the template, put `\u003Col>\u003Cli>\u003Cobject src=\"~/assets/svg/list.svg\">\u003C/object>\u003C/li>\u003Cli>\u003Cimg src=\"~/assets/svg/list.svg\">\u003C/li>\u003C/ol>`\r\n5. Observe that the first item does not render whereas the second does.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1862\">#c1862\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2895],{"name":2896,"color":2897},"2.x","d4c5f9",2099,"closed","path to assets folder is not resolved when using \u003Cobject>/\u003Cembed>","2023-01-18T15:43:04Z","https://github.com/nuxt/nuxt/issues/2099",0.4669783,{"labels":2905,"number":2913,"owner":2874,"repository":2874,"state":2899,"title":2914,"updated_at":2915,"url":2916,"score":2917},[2906,2909,2912],{"name":2907,"color":2908},"stale","ffffff",{"name":2910,"color":2911},"pending triage","E99695",{"name":2896,"color":2897},6993,"Asset Path not resolved using \u003Cobject>","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/6993",0.6479657,{"description":2919,"labels":2920,"number":2922,"owner":2874,"repository":2874,"state":2899,"title":2923,"updated_at":2924,"url":2925,"score":2926},"I created a new Nuxt project and put files named `campus.jpg` and `campus.mp4` inside the assets folder.\r\nThen in my `index.vue` I just wrote:\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cvideo autoplay muted loop poster=\"~assets/campus.jpg\">\r\n \u003Csource src=\"~assets/campus.webm\" type=\"video/webm\">\r\n \u003Csource src=\"~assets/campus.mp4\" type=\"video/mp4\">\r\n \u003C/video>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nThe generated code stays with the same path (i.e. `http://localhost:3000/~assets/campus.jpg`), so just 404 happens. The same path with `\u003Cimg src=\"~assets/campus.jpg\">` works as expected.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c819\">#c819\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2921],{"name":2896,"color":2897},956,"Assets path resolution not working for tags different than \u003Cimg>","2023-01-18T15:40:36Z","https://github.com/nuxt/nuxt/issues/956",0.6720237,{"description":2928,"labels":2929,"number":2932,"owner":2874,"repository":2874,"state":2899,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Versions\r\n\r\n- nuxt: v2.14.12\r\n- node: ex: v10.19.0\r\n\r\n### Reproduction\r\nI added this code to the default \r\n```js\r\n\u003Ctemplate>\r\n \u003Cimg src=\"~/assets/logos/[...\u003Cproject-name>]_lighten_transparent.png\" />\r\n\u003C/template>\r\n```\r\n\r\n### Steps to reproduce\r\nI implemented the upper code.\r\n\r\n### What is Expected?\r\nIt should load the image out of the static folder (assets).\r\n\r\n### What is actually happening?\r\nit breaks the whole application with the following error (I censored it, in order to keep the projects privacy):\r\n\"ERROR in ./components/Logo.vue?vue&type=template&id=05d4cbf4& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=template&id=05d4cbf4&)\r\nModule not found: Error: Can't resolve 'assets/logos/[...]_lighten_transparent.png' in '[...\u003Cproject-root>]\\components'\"\r\n\r\n### efficient Workarround \r\nJust load the assets as basic path out of their location - the /static/ directory is mounted on root by default,\r\nso it looks like this:\r\n```js\r\n\u003Ctemplate>\r\n \u003Cimg src=\"/logos/[... \u003Cproject-name>]_lighten_transparent.png\" />\r\n\u003C/template>\r\n```",[2930,2931],{"name":2910,"color":2911},{"name":2896,"color":2897},8823,"The assets implementation doesn't work as described in the documentation (may be a duplicate)","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8823",0.6866605,{"labels":2938,"number":2942,"owner":2874,"repository":2874,"state":2899,"title":2943,"updated_at":2915,"url":2944,"score":2945},[2939,2940,2941],{"name":2907,"color":2908},{"name":2910,"color":2911},{"name":2896,"color":2897},6874,"Incorrect resolving path in less files","https://github.com/nuxt/nuxt/issues/6874",0.69598114,{"description":2947,"labels":2948,"number":2950,"owner":2874,"repository":2874,"state":2899,"title":2951,"updated_at":2952,"url":2953,"score":2954},"Hi.\r\nI'm using nuxt.js and I like it.\r\nBut have an issue with adding images through\r\n`\u003Cimg v-bind:src=\"~assets/img/image-name.jpg\">`\r\nI'm getting path to images from data array of objects.\r\nWhen I'm using /static `\u003Cimg v-bind:src=\"/img/image-name.jpg\">`it works fine.\r\nHow can I use assets with data from objects? Can you please help me with this?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c272\">#c272\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2949],{"name":2896,"color":2897},322,"Assets use","2023-01-18T15:38:47Z","https://github.com/nuxt/nuxt/issues/322",0.70127237,{"description":2956,"labels":2957,"number":2960,"owner":2874,"repository":2874,"state":2899,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Version\n\n[v2.0.0](https://github.com/nuxt.js/releases/tag/v2.0.0)\n\n### Reproduction link\n\n[https://github.com/laSinteZ/nuxt-assets-url-bug](https://github.com/laSinteZ/nuxt-assets-url-bug)\n\n### Steps to reproduce\n\n`yarn`\n`yarn dev` or `yarn generate`\n\n### What is expected ?\n\nYou must see red boxes with `~/assets/` and no boxes with `~assets/`\n\n### What is actually happening?\n\n`~/assets/` is not resolved by a webpack for css url(), but `~assets/` is resolved. for img src both options work.\n\n### Additional comments?\n\nhttps://nuxtjs.org/guide/assets/ states that we should use `~/assets/` to resolve svg modules. However, for \u003Cimg src.. > both `~/assets/...` and `~assets/...` work, while for css's url() only `~assets/...` works. Additional url with compiled files: https://dist-lxayhipvve.now.sh\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7790\">#c7790\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2958,2959],{"name":2910,"color":2911},{"name":2896,"color":2897},3931,"Webpack is not resolving ~/assets/ for css url","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3931",0.70703876,{"description":2966,"labels":2967,"number":2969,"owner":2874,"repository":2874,"state":2899,"title":2970,"updated_at":2971,"url":2972,"score":2973},"I am trying to use something like this\r\n\r\n```html\r\n\u003Cdiv :style=\"type ? {'background-image': `url('~assets/images/${type}.svg')`, 'background-position': '96% 50%'} : ''\">\u003C/div>\r\n```\r\n\r\nBut Nuxt doesn't resolve this path. `GET http://localhost:3333/~assets/images/amex.svg 404 (Not Found)`\r\n\r\nThen I tried simple \r\n\r\n```html\r\n\u003Cimg :src=\"`~assets/images/amex.svg`\">\r\n```\r\nBut this one doesn't work too, so the issue only when using literals. \r\n\r\nAny chance to fix this behavior?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1568\">#c1568\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2968],{"name":2896,"color":2897},1746,"Webpack doesn't load images from `assets` if using template literals","2023-01-18T15:42:21Z","https://github.com/nuxt/nuxt/issues/1746",0.7100118,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9fkuc-ggqZjbL86Libr8uX_nRmQ8dpIjA7swotSVKvY":-1},"/nuxt/ui/2099"]