We Keep Coding

Displaying alt content instead of image in React js

image not displaying
function ProductScreen(props) {
const product = data.products.find((x) => x._id === props.match.params.id)
<div className="col-2">
<img className="large" src={product.image} alt={product.name}/>
</div>
I'm trying to render the image of specific id but only alt attribute is being displayed. Can anyone help me with it. Thankyou

You might need to use require()...in order for react to process it.
<img className="large" src={require(product.image)} alt={product.name}/>
The other way of doing it is importing the image into a variable and referencing that in your {src}. A quick search yields many results -
Following is from https://stackoverflow.com/a/32613874/5867572
const imgSrc= './image1.jpg';
return <img src={imgSrc} />
Following is from https://stackoverflow.com/a/35454832/5867572
import LogoImg from 'YOUR_PATH/logo.png';
<img src={LogoImg}/>

Console log the product and see if your image URL is okay, you'll get more idea why it's not displaying
const product = data.products.find((x) => x._id === props.match.params.id)
console.log(product);

Obviously this is skipping the problem but what about:
<div className="col-2">
<img className="large" src={product.image} title={product.name}/>
</div>

Is there a method to implement through data attributes in JavaScript?

I want implement the card content in the card when expanded, I have used the help of JavaScript to implement the title, image, description ,I have used 'data-title' and 'data-type' for displaying title and image respectively which are by the working fine and when I try to implement card description by using data-desc attribute , it is displaying 'undefined'.
Anyone please help me with my code.
My code link: https://codepen.io/Avatar_73/pen/ExyNdMK
const getCardContent = (title, type, desc) => {
return `
<div class="card-content">
<h2>${title}</h2>
<img src="./assets/${type}.png" alt="${title}">
<p>${desc}</p>
</div>
`;
}
<div class="cards">
<div class="card" data-type="html" data-desc="I am HTML">
<h2>HTML5</h2>
</div>
</div>

On line 115, you forgot to pass the desc to your getCardContent function
Change to:
const content = getCardContent(card.textContent, card.dataset.type, card.dataset.desc)

Change your calling method signature from
getCardContent(card.textContent, card.dataset.type)
to
getCardContent(card.textContent, card.dataset.type, card.dataset.desc)
you are not passing the third parameter(card.dataset.desc) in the method thus it is rendering the value as undefined.

concat src img with condition in angular

i try to show image of users in template angular from api call .So if the image is emty i will show any other img but if image is null i should make condition in src img :
<img [src]="element.img!= null ? 'http://api.pointeuse.clediss.online/{{element.img}}' :
'https://img2.freepng.fr/20180523/tha/kisspng-businessperson-computer-icons-avatar-clip-art-lattice-5b0508dc6a3a10.0013931115270566044351.jpg'"
class="img-thumbnail border-0" />
the problem is i need to concate {{element.img}} with my base url

Use a get method.
.html:
<img [src]="imageUrl"/>
.ts:
get imageUrl(): string {
return this.element.img != null ? `some_url/${this.element.img}` : `other_url`;
}

In your .component.ts file, make this a computed property is one approach
get elementImage(): string {
if (this.element.image !== null) {
return `http://api.pointeuse.clediss.online/${this.element.image}`
} else {
return 'https://img2.freepng.fr/20180523/tha/kisspng-businessperson-computer-icons-avatar-clip-art-lattice-5b0508dc6a3a10.0013931115270566044351.jpg'
}
in your template, it would be
<img [src]="elementImage" class="img-thumbnail border-0" />

Vue - dynamically create divs that use e.g v-on:click

I have something like that:
<div v-if="dataIsLoaded" v-for="(line, index) in json.data" v-on:dblclick="edit(index)" v-html="test(index)">
</div>
and test(index) returns html-ish string:
<div id=${index} v-on:click="remove(index)"></div>
How can I make it work?
My goal is:
If dataIsLoaded == true, then foreach (line, index) in json.data perform
test(index) and return its output to that container and display it as html.
Meanwhile output from test(index) can have different functions/events associated with them defined via string (as I showed above).

Why are you using v-html here? v-html should really only be needed in very specific and limited situations; I don't think it applies here. The string <div id=${index} v-on:click="remove(index)"></div> is not plain HTML, it's a Vue template string, so it won't work. v-html is also susceptible to XSS attacks; all in all I say avoid it like the plague.
Do something like this instead:
<template v-if="dataIsLoaded">
<div v-for="(line, index) in json.data" #dblclick="edit(index)">
<!-- Type1 -->
<div v-if="line.type === 'Type1'" :id="index" #click="remove(index)"></div>
<!-- Type2 -->
<div v-else-if="line.type === 'Type2'">...</div>
</div>
</template>
I've added the type property on each line object as a discriminator to determine which template should be used for the line.
Also I've hoisted the v-if="dataIsLoaded" into a <template> above the div because v-if is evaluated for each div generated by the v-for and the condition doesn't depend on the children so it needn't be repeated for each child (a minor optimization).
If you don't like the idea of having lots of v-if and v-else-if (a sort of "switch" statement in the template) then you can use <component :is="..."> instead:
<div v-for="(line, index) in json.data" #dblclick="edit(index)">
<component :is="line.type" :id="index"/>
</div>
import Type1 from './type1.vue'
import Type2 from './type2.vue'
export default {
components: {
Type1,
Type2
}
}

It's not possible with v-html, as the doc states
Updates the element’s innerHTML. Note that the contents are inserted
as plain HTML - they will not be compiled as Vue templates
A more component-thinking solution is to create a component(s) with needed behaviour and paste them as a results of v-for:
// componentWithOnClick.js
<script>
export default {
name: 'ComponentWithOnClick',
methods: {
remove() {
//
}
}
</script>
<template>
<div id=${index} v-on:click="remove(index)"></div>
</template>
and then use it in the parent file:
//app.js
import ComponentWithOnClick from './ComponentWithOnClick.vue'
{
components: {
ComponentWithOnClick
}
//
<div v-if="dataIsLoaded" v-for="(line, index) in json.data" v-on:dblclick="edit(index)">
<ComponentWithOnClick></ComponentWithOnClick>
</div>

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}">