Fixed image paths

pull/12/head
cagataycivici 2019-05-23 17:51:56 +03:00
parent bc379c2d1a
commit 982a7aae60
18 changed files with 38 additions and 38 deletions

View File

@ -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>

View File

@ -62,7 +62,7 @@ export default {
<template v-pre>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;
@ -275,7 +275,7 @@ export default {
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;

View File

@ -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>

View File

@ -36,7 +36,7 @@ mounted() {
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -54,7 +54,7 @@ mounted() {
&lt;template #gridItem="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@ -366,7 +366,7 @@ mounted() {
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
@ -384,7 +384,7 @@ mounted() {
&lt;template #gridItem="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;hr class="ui-widget-content" style="border-top: 0" /&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;

View File

@ -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>

View File

@ -45,7 +45,7 @@ data() {
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
@ -265,7 +265,7 @@ data() {
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;

View File

@ -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

View File

@ -964,10 +964,10 @@
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
condimentum eget hendrerit sit amet.&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt;Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque

View File

@ -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>

View File

@ -43,7 +43,7 @@ data() {
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
@ -229,7 +229,7 @@ data() {
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;

View File

@ -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>

View File

@ -40,7 +40,7 @@ data() {
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -49,7 +49,7 @@ data() {
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
@ -252,7 +252,7 @@ data() {
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt;
&lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -261,7 +261,7 @@ data() {
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;

View File

@ -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>

View File

@ -13,7 +13,7 @@ import OverlayPanel from 'primevue/overlaypanel';
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</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>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</CodeHighlight>
@ -159,7 +159,7 @@ toggle(event) {
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true"&gt;
&lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
&lt;/div&gt;
&lt;/div&gt;

View File

@ -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>

View File

@ -243,7 +243,7 @@ onPage(event) {
&lt;/Paginator&gt;
&lt;div class="image-gallery"&gt;
&lt;img :src="&#39;/demo/images/nature/&#39; + image + &#39;.jpg&#39;" /&gt;
&lt;img :src="&#39;demo/images/nature/&#39; + image + &#39;.jpg&#39;" /&gt;
&lt;/div&gt;
&lt;/div&gt;

View File

@ -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>

View File

@ -41,7 +41,7 @@ export default {
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
@ -176,7 +176,7 @@ export default {
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt;
&lt;div style="text-align: center; padding: 1em; width: 125px"&gt;
&lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" /&gt;
&lt;div style="margin-top: 1em"&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;