We Keep Coding

Angular - Use a default image if image does not exist on server

I have a component that will display a cover image. The user can upload a cover image and the component will display the user uploaded image. If the user doesn't upload an image, then I want to display a default image.
If there is no user uploaded image I want to return an error and call the changeSource(event), which should in theory bind a new image url to the img src. However I'm getting undefined for the event.target.src and I'm seeing a blank space where the default image should be. It works fine when displaying the custom image.
component.html
<div *ngFor="let coverPhoto of coverPhotos">
<img src="{{coverPhoto}}"
(error) ="changeSource($event)" />
</div>
component.ts
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
this.coverPhotos = result;
}, error => {
this.errors = error;
this.changeSource(event);
}, () => {
}
);
changeSource(event) {
event.target.src = "https://imageurl";
}

directly use (where defaultImage is a variable in ts file which holds the default image path) -
(error)="$event.target.src = defaultImage"
your HTML -
<div *ngFor="let coverPhoto of coverPhotos">
<img src="{{ coverPhoto }}" (error)="$event.target.src = defaultImage" />
</div>
Working example here.
You are passing event from this code in ts, which is obviously undefined, and you don't need to call this function from here -
this.myService.getPhotos(ImageType.Cover, this.id).subscribe(result => {
this.coverPhotos = result;
}, error => {
this.errors = error;
this.changeSource(event);
}, () => {
}
);

The *ngFor was throwing it off. Removing this seemed to solve the problem. Not quite sure why so will post an edit when I discover why.
<div>
<img src="{{coverPhotos}}"
(error)="$event.target.src = defaultImage" />
</div>

vue dynamic image binding

The original code used an image in a menu like so:
<img
:alt="$t('more')"
class="mobile-plus-content visible-xs"
src="../../../assets/img/plus79.png"
/>
This compiles to:
src="data:image/png;base64,the image"
I changed it to:
v-bind:src="mobileImage(id)"
And in my script:
methods: {
mobileImage(id) {
console.log('id:', id);
return logic ? plus : minus;
},
It logs the id but I don't know what to return here. Where should I put the png because vue is no longer compiling it into static resources?

Just FYI. You can also use require in the template tag:
<template>
<div>
<img v-if="isMenuOpen(id)" :src="require('#/assets/img/minus-1.png')"/>
<img v-else :src="require('#/assets/img/plus79.png')"/>
</div>
</template>

In script I did:
const minus = require('#/assets/img/minus-1.png');
const plus = require('#/assets/img/plus79.png');
and in mobileImage:
return this.isMenuOpen(id)
? minus
: plus;

Modify Image Url Value with Vue Js in a Loop

I have a simple Loop with conditionals. I want to modify the full url to a version of the image with 60x60 pixels.
Full image url : www.example.com/img/full-image-001.jpg .
Modified image url that I need : www.example.com/img/full-image-001-60x60.jpg .
<template v-else-if="column === 'product_img'">
<img :src="replaceLink.columnValue" alt="" height="60" width="60">
</template>
Method function:
methods : {
replaceLink (record) { //logic
}
}
EDIT :
Is this the proper way ?
methods: {
replaceLink (record) {
let res = record.replace(".jpg", "-60x60.jpg");
console.log(res);
}
},

Better solution is to create filter and use it on your images.
Instead fo methods object create filters object with replace function:
filters: {
replaceLink: function(value) {
if (!value) return '';
return value.replace('.jpg', '-60x60.jpg');
}
}
And now in your HTML you can use it like this:
<img :src="source | replaceLink" />
You should have source in your component data or you will get an error. This source should be image url

Read-only variable when assigning object to variable

I have a variable named picture that is taking in a thumbnail that is an address for a picture. I want to use that as the src path for my img tag. How do I accomplish this? From what i'm understanding is React generates render() first and then componentDidMount(), but my code is returning Cannot set property 'src' of null.
Update
I changed the code based off suggested comments. I loaded the state in my constructor so that gets defined before everything else. But now it says picture" is read-only which is where --> is
Code
constructor(props) {
super(props);
this.props.getVideos();
const picture = {};
this.props.getVideos();
if (this.props.videos == null) {
console.log("It's null");
} else {
const videos = this.props.videos.video.map(video => {
<h5 key={video._id}>{video.thumbnail}</h5>;
--> picture = video.thumbnail;
});
}
}
componentDidMount() {
console.log(picture);
}
Snippet of return in render
<div className="explore">
<div className="row">
<div className="row__inner">
<div className="tile">
<div className="tile__media">
<img className="tile__img" id="thumbnail" src={picture} alt="" />
</div>
<div className="tile__details">
<div className="tile__title">
<h5>Impact Dallas</h5>
</div>
</div>
</div>
Update
I changed the code based off suggested comments. I loaded the state in my constructor so that gets defined before everything else. But now it says picture" is read-only which is where --> is

Add class based on some condition Angular2

I am working with ng2 project and I need a help with one task, where should I add css class, only for one item from array.
I got sommething like this:
<div class="ds-photo__item" *ngFor="let albumPhoto of albumPhotos">
<div class="ds-photo__item--cover">
<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [class.selected]="...">
</div>
</div>
And I need add class select only for one item which is choosen by function below:
selectCover() {
if (this.album.cover) {
this.cover = this.albumPhotos.find( photo => photo.id === this.album.cover );
console.log("COVER: ", this.cover);
this.isCover = true;
} else { this.isCover = false }
}
after that, I have one object with current cover of album. I need to add class "selected" to listed item, whuch is actualy cover.
I need something like this:
[class.selected]="if albumPhoto.id === cover.id"
or sommething similar. There is possible to pass function, not only variable in [class.my-class]?
Please for hints!
Regards Greg

You can use ngClass as follows :
<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [ngClass]="{selected : albumPhoto.id === cover.id}">

Done with:
[class.selected]="cover.id === albumPhoto.id"
I hope it will help someone.
Bye!

If you need only one class to be applied based on some condition then use
[class.selected]="cover.id === albumPhoto.id"
<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [class.selected]="cover.id === albumPhoto.id">
[class.selected]="cover.id === albumPhoto.id"
but If you have multiple class to be applied based on some condition then just use this format
[ngClass]="{selected : albumPhoto.id === cover.id}"
<img class="ds-photo__item--cover-photo" [src]="albumPhoto.url" alt="" (click)="choseCover(albumPhoto)" [ngClass]="{selected : albumPhoto.id === cover.id}">