I have created an Array with three objects and a loop over it in my template.
It is working fine for getting other data and src data but it is not showing my images.
Does anybody what should i do?
sandbox link to my project
And here is my template code
<div
class="box m-3"
#click="selectBox(item.id)"
v-for="item in boxData"
:key="item.id"
:class="{
'border-select': selected(item.id),
}"
>
<p>{{ item.name }}</p>
<img :src="item.src" width="60" alt="" />
src: {{item.src}}
</div>
My data
boxData: [
{ id: 1, name: "object 1", src: "#/assets/power(1).png" },
{ id: 2, name: "object 2", src: "#/assets/power(1).png" },
{ id: 3, name: "object 3", src: "#/assets/power(1).png" },
],
Solution 1:
If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.
In your code, you can then reference these files relative to the root (/):
<!-- Static image from static directory -->
<img src="/my-image.png" />
<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />
Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:
<img :src="`${yourPrefix}/my-image.png`" />
Solution 2: When working with dynamic images you will need to use require
<img :src="require(`~/assets/img/${image}.jpg`)" />
Image not displaying in loop Vue.js
<img :src="require(`#/assets/${item.src}`)" width="60" alt="" /> src: {{ item.src }}
It worked like this
Related
i pass an image address to a component , But it doesnt show that !!
i also use require() But nothing .
this is component code
<div >
<img :src="require(data.src)" class="ccard-right-img" alt="" />
</div>
and this is paent component code :
<product-card
:data="{cat: 'category', title: 'card title', src: '~/static/1.png' }"
/>
how can i fix it ??
finally i didi it like this:
<img :src="require('#/static/'+data.src+'.png')" class="ccard-right-img" alt="" />
I am developing an algolia search solution for an ecommerce app with around ~30000 products.
I tried to use the <ais-configure/> component to filter my results before showing them on the page, as I am working with different pages for each category of products and some facet filters also need to be applied if a user was to click on a promotion which would lead to this search result in the code below.
The problem is:
Whenever I use the filters in <ais-configure/> the same filters are not picked up by my <ais-refinement-list/> component which should have the refined facets highlighted.
The below code is not working but descriptive enough for the problem.
Template
<ais-instant-search :search-client.camel="searchClient" index-name="products">
<ais-configure
:filters.camel="searchParameters.filters"
:facet-filters.camel="searchParameters.facetFilters"
/>
<ais-infinite-hits>
<div
slot="loadMore"
slot-scope="{ isLastPage, refineNext }"
class="w-full my-12 px-6 text-sm-black-primary"
>
<button
class="
w-full
h-20
border-4
rounded-md
border-sm-black-primary
font-semibold
text-xl
mb-24
"
:disabled="isLastPage"
#click="refineNext"
>
See more
</button>
</div>
</ais-infinite-hits>
<products-filter-section>
<div v-for="(filterType, id) in filterTypes" :key="id">
<ais-refinement-list :attribute="filterType" searchable show-more>
<template
slot-scope="{
items,
isShowingMore,
isFromSearch,
canToggleShowMore,
refine,
createURL,
toggleShowMore,
searchForItems,
}"
>
<div>
<UtilsFancyTitle
:text="filterType"
text-size="text-lg"
class="ml-4 my-4"
/>
<input
class="bg-white"
#input="searchForItems($event.currentTarget.value)"
/>
<ul class="flex flex-wrap">
<li v-if="isFromSearch && !items.length">No results ...</li>
<li v-for="item in items" :key="item.value" class="my-4 mr-4">
<a
:href="createURL(item)"
:class="
item.isRefined
? 'font-semibold bg-sm-yellow-primary border-sm-yellow-primary '
: 'font-medium'
"
class="
border-4 border-sm-black-primary
py-1.5
px-2
rounded-md
text-sm
"
#click.prevent="refine(item.value)"
>
<ais-highlight attribute="item" :hit="item" />
( {{ item.count.toLocaleString() }} )
</a>
</li>
</ul>
<div class="flex justify-center items-center">
<div class="w-1/4 h-1 bg-sm-black-primary rounded-md"></div>
<button
class="w-2/4 font-semibold my-6"
:disabled="!canToggleShowMore"
#click="toggleShowMore"
>
{{ !isShowingMore ? 'Show more' : 'Hide' }}
</button>
<div class="w-1/4 h-1 bg-sm-black-primary rounded-md"></div>
</div>
</div>
</template>
</ais-refinement-list>
</div>
</products-filter-section>
</ais-instant-search>
Script
import {
AisInstantSearch,
AisRefinementList,
AisInfiniteHits,
AisConfigure,
} from 'vue-instantsearch'
import algoliasearch from 'algoliasearch/lite'
import { mapGetters } from 'vuex'
export default {
components: {
AisInstantSearch,
AisRefinementList,
AisInfiniteHits,
AisConfigure,
},
data() {
return {
searchClient: algoliasearch(
'[API-ENDPOINT]',
'[API-KEY]'
),
filterTypes: [
'type',
'color',
],
searchParameters: {
filters: `category:${this.$route.path.split('/').pop()}`,
facetFilters: `type:someProductType`,
},
}
},
head() {
return {
link: [
{
rel: 'stylesheet',
href: 'https://cdn.jsdelivr.net/npm/instantsearch.css#7.4.5/themes/reset-min.css',
},
],
}
},
}
Is there any working solution for this?
The facets should be auto selected and in their refined state (for example: having their isRefined property set to rue) whenever the algolia query loads and the page renders.
This question has been posted a while ago, so you might already have found an answer, but I'll post mine anyway since I landed here after having the same issue.
In my case, at least, there were 2 problems:
I hadn't configured the "Attributes for faceting". This is explained in the docs and can be done easily via the admin or via API.
I was specifying the facets incorrectly in code. In your example above I think you should have:
searchParameters: {
facetFilters: [[`type:someProductType`]],
},
Note that now facetFilters is an array within an array.
What helps me when I'm unsure I open the admin UI of Algolia, select a search and apply whichever filter I want and then check the raw output. An example from my admin ui:
This gives me an idea of the correct shapes InstantSearch needs.
Not sure why when I run my Vue app locally, the navbar links works. But after deploy, it gets an error
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.
When I inspect it, I get:
Local - <a data-v-5e628c52="" href="/students" class="md-opjjpmhoiojifppkkcdabiobhakljdgm_doc">Students</a>
Server - <a data-v-9b8548a0="" href="/students" class="md-opjjpmhoiojifppkkcdabiobhakljdgm_doc">Students</a>
This is my App.vue:
<template>
<div id="app">
<Header
name=""
:navLinks="[
{
name: 'Home',
link: '/',
dropdown: false
},
{ name: 'Students', link: '/students', dropdown: false }
]"
/>
<router-view />
<Footer />
</div>
</template>
<script>
import Header from "./components/layout/Header";
export default {
name: "app",
components: {
Header
}
};
</script>
and my Header.vue
<template>
<div>
<nav>
<div v-if="name" id="logo">
{{ name }}
</div>
<div v-else id="logo">
<img alt="Vue logo" src="../../assets/stevelogo.png" width="50" />
</div>
<ul class="nav-links">
<li v-for="list in navLinks" :key="list.key">
<a v-if="list.dropdown === false" :href="list.link">{{
list.name
}}</a>
<div class="dropdown-link" v-else>
<a :href="list.link">
{{ list.name }}
<span>↓</span>
</a>
</div>
</li>
</ul>
<div v-on:click="openMobileNav()" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</template>
<script>
export default {
name: "Header",
};
</script>
There are two types of environment in a Vue Application (or React or Angular)
Development
Production
While you are running a development server on port 8000, all requests are handled by the development server BUT when you deploy your application all request must go into dist/index.html OR build/index.html (Depending on your build configuration)
You can try to deploy application on netlify.com with following build command
CI='' npm run build && echo "/* /index.html 200" > dist/_redirects
Else for you current deployment, you need to change configuration of the deployment so that all requests after /* goes to dist/index.html
I am having trouble displaying images in my Vue CLI project.
Here is what I have going on. This vue file accesses a json file with a few references to the individual Eyewear objects, all that works. I have references to the image I am trying to access in the json file. And with the current code, I can see the correct image reference in the browser, but it does not load the image. Is it something to do with webpack or another loader needing to load the image file?
<template>
<div>
<h1 id='callout'>Select Your Eyewear</h1>
<div id='item' v-for='item in items' :key=item.id>
<img :src='`..${item.images.frontal}`' alt='eyeware' />
<ul id='itemLIist'>
<li >
{{ item.brand }}
</li>
<li>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import items from "../assets/eyewear.json";
export default {
name: "ItemList",
data: function() {
return {
items: items.eyewear
};
}
};
</script>
<style scoped>
</style>
I don't know this works for you or not. But in my case providing the full path of the image works for me. in your screenshot reference starting from "../assets" instead of that try something "src/assets" (Full path with out dots)
and for make this simple, first just try to hard code full path src to a image tag and see whether it's working or not.
and let me know if this works for you. =)
My Vue.js component is like this:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<div class="panel-body">
<a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
Show
</a>
</div>
<div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
...
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
When executed, there exists an error like this:
Vue template syntax error:
id="purchase-{{ item.id }}": Interpolation inside attributes has
been removed. Use v-bind or the colon shorthand instead.
How can I solve it?
Use JavaScript code inside v-bind (or shortcut ":"):
:href="'#purchase-' + item.id"
and
:id="'purchase-' + item.id"
Or if using ES6 or later:
:id="`purchase-${item.id}`"
Use v-bind or shortcut syntax ':' to bind the attribute.
Example:
<input v-bind:placeholder="title">
<input :placeholder="title">
Just use
:src="`img/profile/${item.photo}`"
If you're pulling data from an array of objects, you need to include require('assets/path/image.jpeg') in your object like I did below.
Working example:
people: [
{
name: "Name",
description: "Your Description.",
closeup: require("../assets/something/absolute-black/image.jpeg"),
},
Using require(objectName.propName.urlPath) in the v-img element did not work for me.
<v-img :src="require(people.closeup.urlPath)"></v-img>
The easiest way is too require the file address:
<img v-bind:src="require('../image-address/' + image_name)" />
The complete example below shows ../assets/logo.png:
<template>
<img v-bind:src="require('../assets/' + img)" />
</template>
<script>
export default {
name: "component_name",
data: function() {
return {
img: "logo.png"
};
}
};
</script>
The most elegant solution is save images outside Webpack. By default, Webpack compress images in Base64, so if you save images in your assets folder, that doesn't work because Webpack will compress images in base64, and that isn’t a reactive variable.
To solve your problem, you need to save your images in your public path. Usually the public path is in "public" folder or "statics".
Finally, you can do this:
data(){
return {
image: 1,
publicPath: process.env.BASE_URL
}
}
And your HTML you can do this:
<img :src="publicPath+'../statics/img/p'+image+'.png'" alt="HANGOUT PHOTO">
When to use the public folder
You need a file with a specific name in the build output
File depends on a reactive variable that can change in execution time
You have images and need to dynamically reference their paths
Some library may be incompatible with Webpack and you have no other option but to include it as a <script> tag.
More information: "HTML and Static Assets" in Vue.js documentation