I am using AngularJS material. I would like to load an image based on the switch status. Below is the relevant HTML code.
If sw_status.sw1 == true, load image truePic.jpg. If sw_status.sw1 == false, load image falsePic.jpg.
<div ng-controller="AGCtrl">
<md-switch ng-model="sw_status.sw1" aria-label="Switch_1" ng-change="onChange(sw_status.sw1)">
Switch_1: {{ sw_status.sw1 }}
</md-switch>
</div>
<img src='img/truePic.jpg'>
<img ng-src="{{sw_status.sw1 ? 'truePic.jpg' : 'falsePic.jpg'}}">
Related
I have to put images in my PDF, however the images cannot display, instead it display like image not found or type unknown There are two images that have to display:
from public directory /default.png
from Voyager settings Voyager::image(setting('admitcard.signature'))
Below are my code:
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true)->loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
If I didn't use setOptions then the public image is display but not Voyager Image.
Below are my html:
<img src="{{ URL::to('/') }}/default.png" alt="default">
<img src="{{ Voyager::image(setting('admitcard.signature')) }}" width="70">
I've search but cannot debug, any help would be appreciate. Thanks in advance
For those who have problem like me I solved it like below:
$pdf = PDF::loadView('pdf', compact('data'));
return $pdf->download($data->name.'-admit-card.pdf');
And in HTML:
<img src="default.png" alt="default">
<img src="storage/{{ setting('admitcard.signature') }}" width="70">
I have some decks of cards.
I want to display a specific image for each deck, I have an assets folder with all my images.
<div class="decks">
<div *ngFor="let deck of decks" class="deck">
<img
src="../../assets/img/MAGE.png"
MAGE is just an exemple of a deckClass, that name should match deck.deckClass
class="img-responsive"
style="height: 200px;">
<h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
<p *ngFor="let card of deck.deckCards" >
{{ card.name }} : {{ card.manaCost }}
</p>
</div>
</div>
How can I concatenate in a src attribute the deck.deckClass name in a dynamic way?
Consider using the Expression Context
You can wrap the sry attribute with square brackets, this way Angular will know to evaluate the value:
[src]="'../../assets/img/' + deck.deckClass '.png'"
See a demo here: https://stackblitz.com/edit/angular-ua9cfc
I don't have images in there, so they will be shown as broken img's in the demo ...
p.s.: if those images are in your src/assets/ folder, then this should suffice:
[src]="'assets/img/' + deck.deckClass '.png'"
I have the below structure, where I have my images data in the json format which has the links to the assets folder. Where all the images are placed. I was thinking to use this way of using images for testing as in future we will have images somewhere in the web and will fetch from the there based on the similar JSON:
- app
- core
- data
- img.json
- layout
- test.component.ts
- assets
- images
img.json:
{
"items" : [
{
"img": "/assets/images/test1.png",
"alt" : "Image 1"
},
{
"img": "/assets/images/test2.png",
"alt" : "Image 2"
},
{
"img": "/assets/images/test3.png",
"alt" : "Image 3"
}
]
}
test.component.ts:
import images from '../../data/img.json';
export class SlideshowComponent implements OnInit {
showNavigationArrows = false;
showNavigationIndicators = false;
items = [0, 1, 2].map((n) => images);
constructor(config: NgbCarouselConfig) {
// customize default values of carousels used by this component tree
config.showNavigationArrows = true;
config.showNavigationIndicators = true;
}
}
HTML:
<ngb-carousel *ngIf="items" [showNavigationArrows]="showNavigationArrows"
[showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img [src]="item" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
I am unable to connect the images to the HTML, any help would be great.
assuming your tsconfig is properly configured to import json (your ts compiler would throw errors at you if not)
you should be able to do this with:
items = images.items; // not sure why you had that index -> map structure?
and
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img [src]="item.img" alt="{{ item.alt }}"> <!-- access the url and use the alt text -->
</div>
</ng-template>
extra based on comments:
if you want to optionally show a video tag, I'd recommend somehting like this:
items = images.items.map(i => Object.assign({}, i, {isVideo: i.img.endsWith('.mov')})) // this only works for mov obviously
template:
<ng-template ngbSlide *ngFor="let item of items">
<div class="picsum-img-wrapper">
<img *ngIf="!item.isVideo" [src]="item.img" alt="{{ item.alt }}"> <!-- simple ngIf to show right tag -->
<video *ngIf="item.isVideo" [src]="item.img" alt="{{ item.alt }}" controls></video>
</div>
</ng-template>
I have a page where I have many links.
Like project1, project2, project3..
In onclick of the link,
<a href="http://localhost:4200/#/dashboard;solution=project1;"/>
<a href="http://localhost:4200/#/dashboard;solution=project2;"/>
<a href="http://localhost:4200/#/dashboard;solution=project3;"/>
So in the next dashboard page, I'am displaying all the projects. So from the first page if I chose "project1", in the next dashboard page(where Im displaying all the projects) Project1 will be highlighted(color change).
<div class="thumbnail" [ngStyle]="{'background-color':project1Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" >
<img src="/assests/img1"/>Project1
</div>
<div class="thumbnail" [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
<img src="/assests/img2"/>Project2
</div>
<div class="thumbnail" [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
<img src="/assests/img3"/>Project3
</div>
In my ts file, based on the routing parameters Im setting up the project flags true or false. Now what is my problem is if I onhover on other projects in dashboard page, highlighted project should not be highlighted.
mouse( e){
console.log("etype :");
this.project1Flag = false;
}
So here the flag is setting up false & all, but still the highlight(color change) is applying to the project1. Could anyone please help me with this?
You are using click event and expecting the hover should work. That certainly will not work. Use (mouseenter)="mouse($event)" instead.
I am new to Django and want to show an image in HTML which is identified by an item's link being clicked in a table. The ID is given when a link is clicked. HTML:
<div id="link-product">
<a id= "product-clicked" href="/prod_details/{item.id }}"> {{ item.product }}
</a>
</div>
VIEWS:
def list_details(request,info_id):
active_user = request.user
product_image = Item_Model.objects.values_list('image').filter(id=info_id)
return render(request,'prod_details.html', {'active_user': active_user, 'product_image': product_image})
Then it will go to the next page and the HTML should receive that item's ID and display its image accordingly. HTML:
<div id="info-box-container">
<img id= "product-image" src = "{{ MEDIA_URL }}{{ product_image }}" />
</div>
But when I do this, the image does not show. I am definitely missing some process. How can I get this to work as desired?
values_list returns a list of tuples but not the single value. Change your query to:
product_image = Item_Model.objects.filter(id=info_id) \
.values_list('image', flat=True).first()