[{"data":1,"prerenderedAt":1089},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource":342,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource-surround":1084},[4,14,36,69,140,325],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,178,203,207,279,304,308],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181,"children":182,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[183,187,191,195,199],{"title":184,"path":185,"stem":186},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":188,"path":189,"stem":190},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":192,"path":193,"stem":194},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":196,"path":197,"stem":198},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":200,"path":201,"stem":202},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":204,"path":205,"stem":206},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":208,"path":209,"stem":210,"children":211,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[212,245,262],{"title":213,"path":214,"stem":215,"children":216,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[217,221,225,229,233,237,241],{"title":218,"path":219,"stem":220},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":222,"path":223,"stem":224},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":226,"path":227,"stem":228},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":230,"path":231,"stem":232},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":234,"path":235,"stem":236},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":238,"path":239,"stem":240},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":242,"path":243,"stem":244},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":246,"path":247,"stem":248,"children":249,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[250,254,258],{"title":251,"path":252,"stem":253},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":255,"path":256,"stem":257},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":259,"path":260,"stem":261},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":263,"path":264,"stem":265,"children":266,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[267,271,275],{"title":268,"path":269,"stem":270},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":272,"path":273,"stem":274},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":276,"path":277,"stem":278},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":280,"path":281,"stem":282,"children":283,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[284,288,292,296,300],{"title":285,"path":286,"stem":287},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":289,"path":290,"stem":291},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":293,"path":294,"stem":295},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":297,"path":298,"stem":299},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":301,"path":302,"stem":303},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":305,"path":306,"stem":307},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":309,"path":310,"stem":311,"children":312,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[313,317,321],{"title":314,"path":315,"stem":316},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":318,"path":319,"stem":320},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":322,"path":323,"stem":324},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":326,"path":327,"stem":328,"children":329,"page":35},"Deployment","\u002Fdeployment","6.deployment",[330,334,338],{"title":331,"path":332,"stem":333},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":335,"path":336,"stem":337},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":339,"path":340,"stem":341},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":343,"title":344,"badge":345,"body":348,"description":1077,"extension":1078,"links":1079,"meta":1080,"navigation":1081,"path":227,"seo":1082,"stem":228,"__hash__":1083},"docs\u002F5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource.md","useCwaImageResource",{"label":346,"color":347},"Draft","amber",{"type":349,"value":350,"toc":1071},"minimark",[351,364,642,647,706,727,731,865,869,1010,1016,1020,1023,1054,1067],[352,353,354,355,359,360,363],"p",{},"Drop-in replacement for ",[356,357,358],"code",{},"useCwaResource"," when your PHP component uses ",[356,361,362],{},"#[Silverback\\Uploadable]",".",[365,366,371],"pre",{"className":367,"code":368,"language":369,"meta":370,"style":370},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","import { toRef } from 'vue'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaImageResource } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nconst {\n  getResource,\n  exposeMeta,\n  contentUrl,\n  displayMedia,\n  loaded,\n  handleLoad\n} = useCwaImageResource(toRef(props, 'iri'), {\n  imagineFilterName: 'thumbnail'\n})\n\nconst resource = getResource()\ndefineExpose(exposeMeta)\n","ts","",[356,372,373,407,431,452,459,491,496,504,513,521,529,537,545,551,588,605,613,618,633],{"__ignoreMap":370},[374,375,378,382,386,390,393,396,400,404],"span",{"class":376,"line":377},"line",1,[374,379,381],{"class":380},"sm4w6","import",[374,383,385],{"class":384},"sOvfz"," {",[374,387,389],{"class":388},"sPB8G"," toRef",[374,391,392],{"class":384}," }",[374,394,395],{"class":380}," from",[374,397,399],{"class":398},"seSrl"," '",[374,401,403],{"class":402},"sLL54","vue",[374,405,406],{"class":398},"'\n",[374,408,410,412,415,417,420,422,424,426,429],{"class":376,"line":409},2,[374,411,381],{"class":380},[374,413,414],{"class":380}," type",[374,416,385],{"class":384},[374,418,419],{"class":388}," IriProp",[374,421,392],{"class":384},[374,423,395],{"class":380},[374,425,399],{"class":398},[374,427,428],{"class":402},"#cwa\u002Fcomposables\u002Fcwa-resource",[374,430,406],{"class":398},[374,432,434,436,438,441,443,445,447,450],{"class":376,"line":433},3,[374,435,381],{"class":380},[374,437,385],{"class":384},[374,439,440],{"class":388}," useCwaImageResource",[374,442,392],{"class":384},[374,444,395],{"class":380},[374,446,399],{"class":398},[374,448,449],{"class":402},"#imports",[374,451,406],{"class":398},[374,453,455],{"class":376,"line":454},4,[374,456,458],{"emptyLinePlaceholder":457},true,"\n",[374,460,462,466,470,474,478,481,485,488],{"class":376,"line":461},5,[374,463,465],{"class":464},"swB56","const",[374,467,469],{"class":468},"sc2zw"," props",[374,471,473],{"class":472},"sVlFx"," =",[374,475,477],{"class":476},"sKpYG"," defineProps",[374,479,480],{"class":384},"\u003C",[374,482,484],{"class":483},"sRCss","IriProp",[374,486,487],{"class":384},">",[374,489,490],{"class":388},"()\n",[374,492,494],{"class":376,"line":493},6,[374,495,458],{"emptyLinePlaceholder":457},[374,497,499,501],{"class":376,"line":498},7,[374,500,465],{"class":464},[374,502,503],{"class":384}," {\n",[374,505,507,510],{"class":376,"line":506},8,[374,508,509],{"class":468},"  getResource",[374,511,512],{"class":384},",\n",[374,514,516,519],{"class":376,"line":515},9,[374,517,518],{"class":468},"  exposeMeta",[374,520,512],{"class":384},[374,522,524,527],{"class":376,"line":523},10,[374,525,526],{"class":468},"  contentUrl",[374,528,512],{"class":384},[374,530,532,535],{"class":376,"line":531},11,[374,533,534],{"class":468},"  displayMedia",[374,536,512],{"class":384},[374,538,540,543],{"class":376,"line":539},12,[374,541,542],{"class":468},"  loaded",[374,544,512],{"class":384},[374,546,548],{"class":376,"line":547},13,[374,549,550],{"class":468},"  handleLoad\n",[374,552,554,557,559,561,564,567,570,573,575,578,581,584,586],{"class":376,"line":553},14,[374,555,556],{"class":384},"}",[374,558,473],{"class":472},[374,560,440],{"class":476},[374,562,563],{"class":388},"(",[374,565,566],{"class":476},"toRef",[374,568,569],{"class":388},"(props",[374,571,572],{"class":384},",",[374,574,399],{"class":398},[374,576,577],{"class":402},"iri",[374,579,580],{"class":398},"'",[374,582,583],{"class":388},")",[374,585,572],{"class":384},[374,587,503],{"class":384},[374,589,591,595,598,600,603],{"class":376,"line":590},15,[374,592,594],{"class":593},"sDHlG","  imagineFilterName",[374,596,597],{"class":384},":",[374,599,399],{"class":398},[374,601,602],{"class":402},"thumbnail",[374,604,406],{"class":398},[374,606,608,610],{"class":376,"line":607},16,[374,609,556],{"class":384},[374,611,612],{"class":388},")\n",[374,614,616],{"class":376,"line":615},17,[374,617,458],{"emptyLinePlaceholder":457},[374,619,621,623,626,628,631],{"class":376,"line":620},18,[374,622,465],{"class":464},[374,624,625],{"class":468}," resource",[374,627,473],{"class":472},[374,629,630],{"class":476}," getResource",[374,632,490],{"class":388},[374,634,636,639],{"class":376,"line":635},19,[374,637,638],{"class":476},"defineExpose",[374,640,641],{"class":388},"(exposeMeta)\n",[643,644,646],"h2",{"id":645},"signature","Signature",[365,648,650],{"className":367,"code":649,"language":369,"meta":370,"style":370},"useCwaImageResource(\n  iri: Ref\u003Cstring>,\n  options?: {\n    imagineFilterName?: string   \u002F\u002F which Imagine filter to use as contentUrl\n  }\n)\n",[356,651,652,659,673,683,697,702],{"__ignoreMap":370},[374,653,654,656],{"class":376,"line":377},[374,655,344],{"class":476},[374,657,658],{"class":388},"(\n",[374,660,661,664,666,669,671],{"class":376,"line":409},[374,662,663],{"class":388},"  iri: Ref",[374,665,480],{"class":472},[374,667,668],{"class":388},"string",[374,670,487],{"class":472},[374,672,512],{"class":384},[374,674,675,678,681],{"class":376,"line":433},[374,676,677],{"class":388},"  options",[374,679,680],{"class":472},"?:",[374,682,503],{"class":384},[374,684,685,688,690,693],{"class":376,"line":454},[374,686,687],{"class":388},"    imagineFilterName?",[374,689,597],{"class":384},[374,691,692],{"class":388}," string   ",[374,694,696],{"class":695},"sTBSN","\u002F\u002F which Imagine filter to use as contentUrl\n",[374,698,699],{"class":376,"line":461},[374,700,701],{"class":384},"  }\n",[374,703,704],{"class":376,"line":493},[374,705,612],{"class":388},[352,707,708,714,715,718,719,722,723,726],{},[709,710,711],"strong",{},[356,712,713],{},"imagineFilterName"," — the name of the LiipImagineBundle filter to apply (e.g. ",[356,716,717],{},"'thumbnail'",", ",[356,720,721],{},"'hero'","). If omitted, ",[356,724,725],{},"contentUrl"," is the raw uploaded file URL.",[643,728,730],{"id":729},"return-values","Return values",[732,733,734,750],"table",{},[735,736,737],"thead",{},[738,739,740,744,747],"tr",{},[741,742,743],"th",{},"Return",[741,745,746],{},"Type",[741,748,749],{},"Purpose",[751,752,753,771,786,800,823,842],"tbody",{},[738,754,755,761,766],{},[756,757,758],"td",{},[356,759,760],{},"getResource",[756,762,763],{},[356,764,765],{},"() => Ref\u003CResource>",[756,767,768,769],{},"Same as ",[356,770,358],{},[738,772,773,778,781],{},[756,774,775],{},[356,776,777],{},"exposeMeta",[756,779,780],{},"object",[756,782,783,784],{},"Pass to ",[356,785,638],{},[738,787,788,792,797],{},[756,789,790],{},[356,791,725],{},[756,793,794],{},[356,795,796],{},"ComputedRef\u003Cstring | undefined>",[756,798,799],{},"URL of the (optionally filtered) image",[738,801,802,807,812],{},[756,803,804],{},[356,805,806],{},"loaded",[756,808,809],{},[356,810,811],{},"Ref\u003Cboolean>",[756,813,814,815,818,819,822],{},"Becomes ",[356,816,817],{},"true"," when ",[356,820,821],{},"handleLoad()"," is called",[738,824,825,830,835],{},[756,826,827],{},[356,828,829],{},"displayMedia",[756,831,832],{},[356,833,834],{},"ComputedRef\u003Cboolean>",[756,836,837,818,839,841],{},[356,838,817],{},[356,840,725],{}," is set AND image has loaded",[738,843,844,849,854],{},[756,845,846],{},[356,847,848],{},"handleLoad",[756,850,851],{},[356,852,853],{},"() => void",[756,855,856,857,860,861,864],{},"Call on the ",[356,858,859],{},"\u003Cimg>"," element's ",[356,862,863],{},"@load"," event",[643,866,868],{"id":867},"example","Example",[365,870,873],{"className":871,"code":872,"language":403,"meta":370,"style":370},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003CTransition name=\"fade\">\n    \u003CNuxtImg\n      v-if=\"displayMedia\"\n      :src=\"contentUrl\"\n      @load=\"handleLoad\"\n    \u002F>\n  \u003C\u002FTransition>\n  \u003Cdiv v-else class=\"skeleton h-48 w-full bg-gray-200 animate-pulse\" \u002F>\n\u003C\u002Ftemplate>\n",[356,874,875,886,911,919,933,946,959,964,973,1001],{"__ignoreMap":370},[374,876,877,879,883],{"class":376,"line":377},[374,878,480],{"class":384},[374,880,882],{"class":881},"s-h7I","template",[374,884,885],{"class":384},">\n",[374,887,888,891,894,898,901,904,907,909],{"class":376,"line":409},[374,889,890],{"class":384},"  \u003C",[374,892,893],{"class":881},"Transition",[374,895,897],{"class":896},"sGtlX"," name",[374,899,900],{"class":384},"=",[374,902,903],{"class":398},"\"",[374,905,906],{"class":402},"fade",[374,908,903],{"class":398},[374,910,885],{"class":384},[374,912,913,916],{"class":376,"line":433},[374,914,915],{"class":384},"    \u003C",[374,917,918],{"class":881},"NuxtImg\n",[374,920,921,924,926,928,930],{"class":376,"line":454},[374,922,923],{"class":896},"      v-if",[374,925,900],{"class":384},[374,927,903],{"class":398},[374,929,829],{"class":402},[374,931,932],{"class":398},"\"\n",[374,934,935,938,940,942,944],{"class":376,"line":461},[374,936,937],{"class":896},"      :src",[374,939,900],{"class":384},[374,941,903],{"class":398},[374,943,725],{"class":402},[374,945,932],{"class":398},[374,947,948,951,953,955,957],{"class":376,"line":493},[374,949,950],{"class":896},"      @load",[374,952,900],{"class":384},[374,954,903],{"class":398},[374,956,848],{"class":402},[374,958,932],{"class":398},[374,960,961],{"class":376,"line":498},[374,962,963],{"class":384},"    \u002F>\n",[374,965,966,969,971],{"class":376,"line":506},[374,967,968],{"class":384},"  \u003C\u002F",[374,970,893],{"class":881},[374,972,885],{"class":384},[374,974,975,977,980,983,986,988,990,993,995,999],{"class":376,"line":515},[374,976,890],{"class":384},[374,978,979],{"class":881},"div",[374,981,982],{"class":896}," v-else",[374,984,985],{"class":896}," class",[374,987,900],{"class":384},[374,989,903],{"class":398},[374,991,992],{"class":402},"skeleton h-48 w-full bg-gray-200 animate-pulse",[374,994,903],{"class":398},[374,996,998],{"class":997},"s01iV"," \u002F",[374,1000,885],{"class":384},[374,1002,1003,1006,1008],{"class":376,"line":523},[374,1004,1005],{"class":384},"\u003C\u002F",[374,1007,882],{"class":881},[374,1009,885],{"class":384},[352,1011,1012,1013,1015],{},"The ",[356,1014,829],{}," computed ensures the skeleton shows until the actual image has loaded in the browser.",[643,1017,1019],{"id":1018},"accessing-multiple-imagine-variants","Accessing multiple Imagine variants",[352,1021,1022],{},"The raw media objects are available on the resource:",[365,1024,1026],{"className":367,"code":1025,"language":369,"meta":370,"style":370},"const resource = getResource()\n\n\u002F\u002F resource.value._metadata.mediaObjects.file.thumbnail.contentUrl\n\u002F\u002F resource.value._metadata.mediaObjects.file.hero.contentUrl\n",[356,1027,1028,1040,1044,1049],{"__ignoreMap":370},[374,1029,1030,1032,1034,1036,1038],{"class":376,"line":377},[374,1031,465],{"class":464},[374,1033,625],{"class":468},[374,1035,473],{"class":472},[374,1037,630],{"class":476},[374,1039,490],{"class":388},[374,1041,1042],{"class":376,"line":409},[374,1043,458],{"emptyLinePlaceholder":457},[374,1045,1046],{"class":376,"line":433},[374,1047,1048],{"class":695},"\u002F\u002F resource.value._metadata.mediaObjects.file.thumbnail.contentUrl\n",[374,1050,1051],{"class":376,"line":454},[374,1052,1053],{"class":695},"\u002F\u002F resource.value._metadata.mediaObjects.file.hero.contentUrl\n",[352,1055,1056,1057,1059,1060,1062,1063,1066],{},"Call ",[356,1058,344],{}," with different ",[356,1061,713],{}," options, or access ",[356,1064,1065],{},"_metadata.mediaObjects"," directly for the full map.",[1068,1069,1070],"style",{},"html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s01iV, html code.shiki .s01iV{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}",{"title":370,"searchDepth":409,"depth":409,"links":1072},[1073,1074,1075,1076],{"id":645,"depth":409,"text":646},{"id":729,"depth":409,"text":730},{"id":867,"depth":409,"text":868},{"id":1018,"depth":409,"text":1019},"Extends useCwaResource for components with file uploads — adds image URL, load state, and Imagine filter variants.","md",null,{},{"title":226},{"title":344,"description":1077},"1kcrt5PGIlINxzKQcH3691-XFAmLOQ4hey7sVEtfWuM",[1085,1087],{"title":222,"path":223,"stem":224,"description":1086,"children":-1},"Composable for Collection-backed components — access paginated items, total pages, and page navigation.",{"title":230,"path":231,"stem":232,"description":1088,"children":-1},"Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.",1782241285098]