Fixed image paths
parent
bc379c2d1a
commit
982a7aae60
|
@ -16,7 +16,7 @@
|
|||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -62,7 +62,7 @@ export default {
|
|||
<template v-pre>
|
||||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
@ -275,7 +275,7 @@ export default {
|
|||
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
|
||||
<template #item="slotProps">
|
||||
<div class="p-clearfix p-autocomplete-brand-item">
|
||||
<img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
|
||||
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
|
||||
<div>{{slotProps.item}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-details">
|
||||
<div class="p-grid">
|
||||
|
@ -46,7 +46,7 @@
|
|||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
|
|
|
@ -36,7 +36,7 @@ mounted() {
|
|||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-data">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
|
@ -54,7 +54,7 @@ mounted() {
|
|||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
|
@ -366,7 +366,7 @@ mounted() {
|
|||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-data">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
|
@ -384,7 +384,7 @@ mounted() {
|
|||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -45,7 +45,7 @@ data() {
|
|||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -265,7 +265,7 @@ data() {
|
|||
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix p-dropdown-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -400,10 +400,10 @@
|
|||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||
condimentum eget hendrerit sit amet.</div>
|
||||
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
|
||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||
|
|
|
@ -964,10 +964,10 @@
|
|||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
||||
condimentum eget hendrerit sit amet.</div>
|
||||
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
||||
|
||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -43,7 +43,7 @@ data() {
|
|||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -229,7 +229,7 @@ data() {
|
|||
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
|
||||
<template #option="slotProps">
|
||||
<div class="p-clearfix">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
|
||||
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</div>
|
||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
@ -24,7 +24,7 @@
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -40,7 +40,7 @@ data() {
|
|||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</div>
|
||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
@ -49,7 +49,7 @@ data() {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -252,7 +252,7 @@ data() {
|
|||
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
|
||||
<template #value="slotProps">
|
||||
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
|
||||
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
|
||||
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
|
||||
<span>{{option.brand}}</span>
|
||||
</div>
|
||||
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
@ -261,7 +261,7 @@ data() {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-car-option">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
|
||||
<span>{{slotProps.option.brand}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@ import OverlayPanel from 'primevue/overlaypanel';
|
|||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</CodeHighlight>
|
||||
|
||||
|
@ -28,7 +28,7 @@ toggle(event) {
|
|||
Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
|
||||
<CodeHighlight>
|
||||
<OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</CodeHighlight>
|
||||
|
||||
|
@ -159,7 +159,7 @@ toggle(event) {
|
|||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="/demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
</Paginator>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -243,7 +243,7 @@ onPage(event) {
|
|||
</Paginator>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||
<img :src="'demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<div style="text-align: center; padding: 1em; width: 125px">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -41,7 +41,7 @@ export default {
|
|||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<div style="text-align: center; padding: 1em; width: 125px">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -176,7 +176,7 @@ export default {
|
|||
<SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
|
||||
<template #option="slotProps">
|
||||
<div style="text-align: center; padding: 1em; width: 125px">
|
||||
<img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
|
||||
<div style="margin-top: 1em">{{slotProps.option.brand}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue