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>
Related
So I'm working on a website that has a lot of movies, and people can choose what movies are they favorite, and for that, I have a star image that can be clicked and when clicked that image will change to another one
Like this:
To this:
The problem I have is that the only image that change is the first one, When I click, for example on the star next to the Ratatouille movie, it will change the first star
This is the HTML:
const getMovieHtml = (movie) => `<div class="movie">
<h2>${movie.title}</h2>
<img onclick="bottonclick()" id="estrelinhas" src="./icons/empty-star.png" alt="estrela vazia" width=40>
<div class="content">
<img src="${movie.posterUrl}" alt="${movie.title}" />
<div class="text">
<p>${movie.summary}</p>
<div class="year">${movie.year}</div>
<div><strong>Directors:</strong> ${movie.director}</div>
<div><strong>Actors:</strong> ${movie.actors}</div>
</div>
</div>
</div>`;
And this is the arrow function I used to make the star change:
const bottonclick = () => {
if (document.getElementById("estrelinhas").src.includes("empty-star.png")) {
document.getElementById("estrelinhas").src = "./icons/filled-star.png";
} else {
document.getElementById("estrelinhas").src = "./icons/empty-star.png";
}
};
ID attributes of HTML elements should be unique. If you don't have unique ID's the code doesn't know which star to update. Read more about IDs here: https://www.w3schools.com/html/html_id.asp
To fix this, a solution would be to use a unique identifier for each image, so that when you click "favourite" it knows which star to reference.
Assuming for example that the movie.posterURL is unique you can use that as the ID, however the data from wherever you are getting the movie from might already have a unique identifier that you could pass to the id attribute of the image instead
Your code could look something like this:
const getMovieHtml = (movie) => `<div class="movie">
<h2>${movie.title}</h2>
<img onclick="bottonclick(e)" id="${movie.posterUrl}" src="./icons/empty-star.png" alt="estrela vazia" width=40>
<div class="content">
<img src="${movie.posterUrl}" alt="${movie.title}" />
<div class="text">
<p>${movie.summary}</p>
<div class="year">${movie.year}</div>
<div><strong>Directors:</strong> ${movie.director}</div>
<div><strong>Actors:</strong> ${movie.actors}</div>
</div>
</div>
</div>`;
const buttonClick = (e) => {
const star = document.getElementById(e.target.id);
if (star.src.includes("empty-star.png")) {
star.src = "./icons/filled-star.png";
} else {
star.src = "./icons/empty-star.png";
}
}
beacuse you getElementById, so you not take all containers,
but you get 1, first,
change getElementById for querySelectorAll and give there some id,
to localizate in DOM ,
buttonClick(e)
and in
function buttonClick(e) {
e.target.value/id/or something
}
I'm new to react and not sure I'm going about this the right way. What is happening is I'm grabbing data from pokemon api turning that data into cards that show up based on game selected. Data gets transferred via prop pokedex. Clicking on a card gets me the information for later storing/use.
Currently I can click the generated cards(from panelComp) and have only 1 show up. It does change based on what I click but does not replace the blank card. I know I will need a statement that stores the card in each div and wont let you go over 6.
What end goal and looking to do is to have 6 blank cards/panels up top as "empty"(grey boxes). I want to fill these with the selected pokemon cards/panels from the ones generated from PanelComp.
Later will be using the selected cards to make a filter based on pokemon types. I know I will also need to add a click event to those cards so I can remove them back to blank. I have tried a few things to no avail any direction would be greatly appreciated as I just cant grasp this for some reason.
Code has placeholders via div emptyBox just so I can lay it out.
import Panel from './Panel';
import './PanelList.css';
const PanelList = ({ pokedex }) => {
const [card, setCard] = useState(null);
const [panelPick, setPanelPick] =useState(null);
const [isSelected, setIsSelected]= useState(false);
useEffect(() => {
setPanelPick(panelComp[card]);
setIsSelected(true);
},[card]);
const panelComp = pokedex.map((pokemon, i) => {
return <Panel
onChange={num => setCard(num)}
panelId={i}
id={pokedex[i].id}
name={pokedex[i].name}
types={pokedex[i].types}
/>
})
const isItSelected = isSelected;
return (
<div>
<div>
<div>
{isItSelected ? (
<div id='Block1'>{panelPick}</div>
) : (
<div className='emptyBox' id='Block1'></div>
)}
</div>
<div className='emptyBox' id='Block2'>{panelPick}</div>
<div className='emptyBox' id='Block3'></div>
<div className='emptyBox' id='Block4'></div>
<div className='emptyBox' id='Block5'></div>
<div className='emptyBox' id='Block6'></div>
</div>
<div>
{panelComp}
</div>
</div>
);
}
export default PanelList;
import React from 'react';
import './Panel.css'
const Panel = ({id, name, types, panelId, onChange, onChildEvent }) => {
const handleEvent = event => {
onChange(panelId)
};
return (
<div className="PNL" onClick={handleEvent}>
<img className='pokeImg' alt='pokemon img' src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}/>
<div className='Potext'>
<h2>{name[0].toUpperCase() + name.substring(1)}</h2>
<p>Id: {id}</p>
<p>Type: {
types.map(type =>
type.type.name[0].toUpperCase() + type.type.name.substring(1))
.join(', ')
}</p>
</div>
</div>
);
}
export default Panel;
This is my current code for the component and child in question. I can add more if needed from the parent. Not sure if I'm making this too difficult or not. I have been working at this for a few days and just don't know where to go with it. Really trying to learn as I go which I'm not sure if it helps.
Thank you
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.
The issues:
How to I access the includes array so I can get the image url to render the image? (or how to I get the images to render in general)
Why is are my description fields not rendering?
So I have a contentful service that gets all the entries as such:
//get all exhibits
getExhibits(query?: object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
include : 2,
content_type: CONFIG.contentTypeIds.exhibit
}, query))
.then(res => res.items);
}
The above function is called in my Gallery component as such:
ngOnInit() {
this.contentfulService.getExhibits()
.then(exhibits => this.exhibits = exhibits);
}
And the data is rendered in the corresponding HTML as such:
<section class="gallery__section" [class.menu--open]="menu.isMenuClosed" *ngFor="let exhibit of exhibits">
<figure>
<img src="{{ exhibit.fields.file.url }}" alt="">
<!-- HOW DO I GET THE IMG URL -->
</figure>
<div class="gallery__text">
<h2 class="gallery__heading">Gallery</h2>
<p class="gallery__title">{{ exhibit.fields.title }}</p>
<h3 class="gallery__artist">{{ exhibit.fields.artist }}</h3>
<p class="gallery_onview">On View</p>
<p class="gallery__dates">{{ exhibit.fields.date }}</p>
<p class="gallery__description" *ngIf="exhibit.fields.description.content[0].content[0].value">{{ exhibit.fields.description.content[0].content[0].value }}</p>
</div>
</section>
Bellow is the JSON of one item the items array:
And here the image that is supposed be part of the above item, but is placed in a different array called includes:
Below is the console.log output of one exhibit:
You don't need to access the includes array. The Contentful SDK will automatically resolve the fields that contain a reference.
For your image issue, I think you're missing the field name for your file field: exhibit.fields.YOUR_FIELD_NAME.fields.file.url
For your description field, I would recommend using ngx-contentful-rich-text to parse the rich text into HTML.
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;