I do not have any errors in the console but my images are not rendering.
I have images here inside data.js
“
export const herbal_treats = [ { id:”1″, name:”GingKo biloba”, cookTime:”10-20″, price:10, favorite:false, origin:” East Asia”, stars:4.5, imageUrl:”photo1.jpeg”, tags:[“Sex machine”,”Dimentia cure”,”Heart Disease”] }, …
“
and a util service
import { herbal_treats } from “../data”;
export const getAll = async () => herbal_treats;
In my Homapge I import Thumbnails
import { getAll } from '../../services/drugService';
import React from 'react';
import classes from "./thumbnails.module.css";
import { Link } from 'react-router-dom';
import StarRating from '../StarRating/StarRating';
import Price from '../Price/Price';
const Thumbnails = ({drugs}) => {
return (
<>
<ul className={classes.list}>
{
drugs.map(drug =>
<li key={drug.id}>
<Link to={`/drugs/${drug.id}`}>
<img
className={classes.image}
src={`/drugs/${drug.imageUrl}`}
alt={drug.name}
/>
<div className={classes.content}>
<div className={classes.name}>{drug.name}</div>
<span className={`${classes.favorite} ${
drug.favorite ? "" : classes.not
}`}>
♥
</span>
<div className={classes.stars}>
<StarRating stars={drug.stars}/>
</div>
<div className={classes.product_item_footer}>
<div className={classes.tags}>
{
drug.tags.map(tag => (
<span key={tag}>{tag}</span>
))
}
</div>
<div className={classes.cook_time}>
<span>????</span>
{drug.cookTime}
</div>
</div>
<div className={classes.price}>
<Price price={drug.price}/>
</div>
</div>
</Link>
</li>
)
}
</ul>
</>
)
}
export default Thumbnails;
I do not know why my images are not rendering. The app runs but images are not displayed.
The app is running good but my images are not displaying. At first it was running good but as soon as I got in on github pages the images turn sour.
Tochiskool Of Italy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.