import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t(`

Vue Images - Flowbite ​

The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations ​

Default image ​

Use this example to show the a responsive image that won’t grow beyond the maximum original width.

vue
<template>
  <fwb-img
    alt="flowbite-vue"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alt="flowbite-vue"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,5),v=t(`

Image caption ​

This example can be used to add a caption for the image often used inside articles. Use caption-class to override the cation.

vue
<template>
  <fwb-img
    alt="flowbite-vue"
    caption="flowbite-vue"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alt="flowbite-vue"
    caption="flowbite-vue"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,3),q=t(`

Sizes ​

Set the size of the image using the w-size and h-size or max-w-size utility classes from Tailwind CSS to set the width and height of the element.

vue
<template>
  <fwb-img
    alt="flowbite-vue"
    size="max-w-md"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alt="flowbite-vue"
    size="max-w-md"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,3),C=t(`

Alignment ​

Align the image component to the center or right side of the document page using mx-auto and ml-auto margin styles.

vue
<template>
  <fwb-img
    alignment="mx-auto"
    alt="flowbite-vue"
    size="max-w-md"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alignment="mx-auto"
    alt="flowbite-vue"
    size="max-w-md"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,3),A=t(`

Grayscale ​

Use the filter option and apply a grayscale to the image element using the grayscale class.

vue
<template>
  <fwb-img
    alt="flowbite-vue"
    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
    size="max-w-lg"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alt="flowbite-vue"
    img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
    size="max-w-lg"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,3),x=t(`

Custom classes ​

Use the img-class prop to apply tailwind classes.

vue
<template>
  <fwb-img
    alt="flowbite-vue"
    img-class="rounded-lg border-[1px]"
    size="max-w-lg"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
<template>
  <fwb-img
    alt="flowbite-vue"
    img-class="rounded-lg border-[1px]"
    size="max-w-lg"
    src="/images/examples/image.png"
  />
</template>

<script setup>
import { FwbImg } from 'flowbite-vue'
</script>
`,3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default};