0

I can't display selected item image only alt are in display.

App.js

 <Route path="/Item/:id" element={<Item />} />

This is my MUI styled Link Trending.js

  <StyledLink to={"/Item/" + item._id}>
            <Stack>
              <ItemName>{item.name}</ItemName>
              <Typography>Brand: {item.brand}</Typography>
            </Stack>
          </StyledLink>

This is my Item.js I can display the item.name and item.brands but I can't display image only alts

 import { useParams } from "react-router-dom";
   import items from "../../items";

const Item = () => {
  let { id } = useParams();
  const item = items.find((item) => item._id === id);
  console.log(item);
  return (
    <>
      <Stack sx={{ backgroundColor: "skyblue", height: "900px" }}>
        <Stack>
          <Stack sx={{ width: "250px", height: "400px" }}>
            <img src={item.image} alt={item.brand} loading="lazy" />
          </Stack>
        </Stack>
        <Stack>{item.price}</Stack>
      </Stack>
    </>
  );
};

export default Item;

This is the results of my console.log and element

{_id: '2', name: 'Headset', image: './images/headset3.jpg', description: 'Noise Cancelling Headset', brand: 'Hyper', …}
brand: "Hyper"
category: "Computer"
countInStock: 1030
description: "Noise Cancelling Headset"
image: "./images/headset3.jpg"
name: "Headset"
numReviews: 169
preSalePrice: 96
price: 98.6
rating: 4.5
_id: "2"
[[Prototype]]: Object

HtmlElement Image Result

this is my items.js

const items = [
  {
    _id: "1",
    name: "Keyboard",
    image: "./images/keyboard2.jpg",
    description: "High-Tech Keyboard",
    brand: "Monster",
    category: "Computer",
    price: 300,
    preSalePrice: 300,
    countInStock: 688,
    rating: 4,
    numReviews: 100,
  },
  {
    _id: "2",
    name: "Headset",
    image: "./images/headset3.jpg",
    description: "Noise Cancelling Headset",
    brand: "Hyper",
    category: "Computer",
    price: 98.6,
    preSalePrice: 96,
    countInStock: 1030,
    rating: 4.5,
    numReviews: 169,
  },
];

export default items;

and this the result I got I don't know what's going on here. I also change width and height of img but nothing happen. Thank you

Result Item.js

Konrad
  • 21,590
  • 4
  • 28
  • 64
JM Grande
  • 1
  • 1
  • Are these images on your local filesystem or a remote server? – adsy Aug 07 '22 at 15:26
  • Does this answer your question? [How do I reference a local image in React?](https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react) – Konrad Aug 07 '22 at 15:26
  • Images are under my Public Folder and items.js are on component folder.. – JM Grande Aug 07 '22 at 15:33

2 Answers2

0

You need to import the images before you can use them.

In your items file, you'll need to import them like so and add the result of the import to each item in the array:

import HeadSet from './images/headset3.jpg'

// stuff

[
  // modify each item in array to do same
  {
    _id: "2",
    name: "Headset",
    image: HeadSet,
    description: "Noise Cancelling Headset",
    brand: "Hyper",
    category: "Computer",
    price: 98.6,
    preSalePrice: 96,
    countInStock: 1030,
    rating: 4.5,
    numReviews: 169,
  },
]
adsy
  • 8,531
  • 2
  • 20
  • 31
  • Compiled with problems:X ERROR in ./src/items.js 3:0-44 Module not found: Error: Can't resolve './images/headset3.jpg' I got error – JM Grande Aug 07 '22 at 15:44
  • You'll need to change the path to match where the image is -- I dont know your folder structure so cant help there. Its probably a bunch of directories up. – adsy Aug 07 '22 at 15:45
  • Thanks Adam. But its working in mapping it. but image is not working if Im using .find() to display selected item it only display the names but image :( https://stackoverflow.com/a/73268926/9109985 – JM Grande Aug 07 '22 at 15:56
0

But it works using .map() in Trending.Js

import items from "../../items";
    <StackImages direction="row">
          {items.map((item) => (
            <StackImg key={item._id}>
              <img src={item.image} alt={item.name} />
    
              <StyledLink to={"/Item/" + item._id}>
                <Stack>
                  <ItemName>{item.name}</ItemName>
                  <Typography>Brand: {item.brand}</Typography>
                </Stack>
              </StyledLink>
    
           
            </StackImg>
          ))}
          {/* End of Image List */}
    
        </StackImages>

This is the result in Trending.js its working .Map() array

but if I select item it will redirect to Item.js and Im using .find() id to display item..

JM Grande
  • 1
  • 1