I'm using the vue-instagram component to display images from my own instagram account..
The url's are correct (when i inspect element, and open the url in new tab, the image shows up...), but it only shows up as an icon (see image below)..
Here's my code : (boilerplate from example) :
<template>
<vue-instagram token="209161622.1677ed0.cd18b9a41f0c4a53b646b8f012f465ab" :count="5" mediaType="image">
<template slot="feeds" slot-scope="props">
<!-- <li class="fancy-list"> {{ props.feed.link }} </li> -->
<img :src="props.feed.link" />
</template>
<template slot="error" slot-scope="props">
<div class="fancy-alert"> {{ props.error.error_message }} </div>
</template>
</vue-instagram>
import VueInstagram from 'vue-instagram'
export default {
components: {
VueInstagram,
}
}
</script>
As you see from the image below, it only display the icon, not the picture itself :
Here is the rendered HTML :
Any idea what i'm doing wrong here ?
Your links are to the post (an HTML page), not directly to the image so they cannot be displayed as images.
From snooping around the component's Github page, it seems you want
<img :src="props.feed.images.low_resolution.url" alt="Image">
Related
I'm just learning NextJs and in one of my projects I'm implementing images using the component. For styling I use TailwindCSS.
When I start scrolling down on my page, the images overlap my fixed header, which is very unexpected. I've tried different layout options for the image component (responsive, fill, intrinsic) but none of them solve my problem. I also tried to give the component a width and height.
When inspecting the image in the dev-tools I see that the images are positioned absolute, even though I haven't set their position to absolute. Is there a way to prevent the images from overlaying? I've tried to change the position and z-index of the image component but nothing seems to have an effect.
Example-Code of the Navigation Component:
const Nav2 = () => {
return (
<div className="fixed bg-slate-200 w-full">
<ul className="flex gap-3 p-5 justify-end">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
);
};
export default Nav2;
Example Code of the Page with the Image
import Image from "next/image";
import Logo from "../public/Fraport_logo.png";
import Nav2 from "../components/Nav2";
const Ihse = () => {
return (
<div>
<Nav2 />
<section className="px-5 py-9 bg-gray-100 pt-20">
<div className="md:max-w-6xl md:mx-auto h-[200vh]">
<div className="md:flex md:flex-row-reverse items-center">
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="responsive" />
</div>
<div className="md:w-1/2 md:pr-14">
<h3 className="text-2xl font-bold mb-6">Headline</h3>
<p className="mb-6">Lorem Ipsum</p>
</div>
</div>
</div>
</section>
</div>
);
};
export default Ihse;
Thank you in advance
Please add layout="fill" property and objectFit="cover" Property like this
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="fill" objectFit="cover" />
</div>
and you need to change the position "relative" in the image wrapper div
I want to pass information (link) form Object, and give it as the src to image. Somehow tag doesn't see it. Even though it console log proper link and the link is working.
Object
setup() {
const state = reactive({
flashcardObject: {
linkToGraphic: 'https://static.fajnyzwierzak.pl/media/uploads/media_image/auto/entry-content/785/mobile/dog-niemiecki.jpg'}
})
return{
state
}
}
Where is the bug
<template>
<div>
<div class="ViewFlashcards">
<div class="image_div">
<img class="picture" src="{{state.flashcardObject.linkToGraphic}}"/>
</div>
</div>
</div>
</template>
Thank you for your help!
Use v-bind, like so:
<img v-bind:src="state.flashcardObject.linkToGraphic" class="picture"/>
Full code:
<template>
<div>
<div class="ViewFlashcards">
<div class="image_div">
<img class="picture" v-bind:src="state.flashcardObject.linkToGraphic"/>
</div>
</div>
</div>
</template>
v-bind allows you to bind an (HTML) attribute to a data property or just some JS code. In this case you just pass along your image URL to the src attribute of the <image>.
Note that mustache syntax, {{ something }}, does not work in HTML attributes; it only will work within elements, like <p>{{ something }}</p>.
Also, note that instead of v-bind:attribute, you can omit the v-bind part and just keep the colon, like so: :attribute. This makes it easier to bind attributes.
For more info and examples see the docs
You should require it and use : to bind the image src to the required path if the image is stored in the app :
<img class="picture" :src="require(state.flashcardObject.linkToGraphic)"/>
or :
<img class="picture" :src="state.flashcardObject.linkToGraphic"/>
if the image is hosted online.
Im using bootstrap vue's pagination component to break up and display content from a v-for loop. I am slicing the array perPage. Everything seems to be working. the correct number of perPage is displayed. The correct number of rows. The only problem is that when I select a new page, the content is never updated on the screen. It shows the same data on every page.
I have console logged the sliced array depending on what page and the slice is happening and working on everyPage click, I just cant get that new array to display on screen.
<b-paggination v-model="currentPage" :total-rows="rows" :per-
page="perPage" aria-controls="my-table" </b-pagination>
<b-col v-if="!showLoad" class="mb-4" v-for="(data,index) in
listOfData" id="my-table" :key="index" cols="12>
<app-card v-bind:data="Data[index]></app-card>
</b-col>
computed: {
rows() {
return this.data.length;
}
listOfData() {
const items = this.Data
return items.slice((this.currentPage - 1) * this.perPage,
this.currentPage * this.perPage);
}
}
Update: I discovered that injecting the content from the v-for into the imported card component (app-card) was somehow stoping the content from updating from page to page. I just removed the app-card component and hard coded a card in its place.. Now for some reason the content is changing from page to page.
```
//This Works:
<div v-for="(data, index) in listOfData" :key="index">
<b-card
overlay
img-src="https://picsum.photos/900/250/?image=3"
img-alt="Card Image"
text-variant="white"
title="Image Overlay"
sub-title="Subtitle"
>
<b-card-text>
{{ data.Data }}
</b-card-text>
</b-card>
</div>
//This Doesnt Work:
<div v-for="(data, index) in listOfData" :key="index">
<app-card v-bind:Dataprop="Data"></app-card>
</div>```
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. =)
As per example given in aurelia documentation I am opening dialog box with viewmodel (say prompt ). This prompt has view inside in which I am adding "router-view" tag.
My routes are already configured. So when first time I open dialog it opens correct views as configured in routes and everything works well. But when I close dialog and re-opens dialog, It's not showing first route view. If I click other route link and come back to first route it works.
I have observed it's not creating instance of view model of first route( when opened dialog second time).
How to fix this issue?
Prompt html
<template><div class="row">
<left-menu ></left-menu>
<router-view></router-view>
</div></template>
<template>
and left-menu.htm
<template>
<div class="list-group">
<template repeat.for="item of items">
<a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
</template>
</div>
Using a router inside a modal window seems off to me. The router is used to manage pages, but a modal is used to manage content within a page.
I would suggest building a modal window component, you can use <slot> tags to inject content and set it's model bindings to any data within the current view model.
Here's an example of my component that I use for this.
<template>
<div show.bind="visibility" class="modal-window">
<div>
<button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
</div>
<slot></slot>
</div>
<div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>
-
import { bindable } from 'aurelia-framework';
export class ModalContent {
#bindable visibility: boolean;
close(){
this.visibility = false;
}
}
<modal-content id.bind="'add-variant-window'">
<h4>Modal Content</h4>
<div>you can bind this to things on the current viewmodel</div>
</modal-content>