Question 239705 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to render images from local storage

Below is my code I want to show images on hero page(slider). And I want to use images from local storage and not URL. you will understand when you see below code what i am trying to say. Could you please have a look and suggest and help me with this?

Below code is the source from which I am trying fetch images.

export const mainCarouselData = [
  {
    image:
      "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/2/_/2_9.jpg",
    path: "/shopping-app/src/images/Home2.PNG",
  },

  {
    image:
      "https://www.ethnicplus.in/media/mageplaza/bannerslider/banner/image/4/_/4_8.jpg",
    path: "/src/images/Home2.PNG",
  },

  {
    image:
      "https://manyavar.scene7.com/is/image/manyavar/HomePage_Hero_I_MGroom_M_23-05-2023-14-14?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/src/images/Home3.PNG",
  },

  {
    image:
      "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/src/images/Home4.jpg",
  },

  {
    image:
      "https://manyavar.scene7.com/is/image/manyavar/Hero_banner_2_HP_D_GMSQUARD_06-06-2023-07-29?$WT%5FHP%2FMLP%2FWLP%5FHero%5FD$",
    path: "/src/images/Home5.jpg",
  },
];

And my JSX:

import React from "react";
import { mainCarouselData } from "./MainCarouselData";
import AliceCarousel from "react-alice-carousel";
import "react-alice-carousel/lib/alice-carousel.css";
const MainCarousel = () => {
  const items = mainCarouselData.map((item) => (
    <img
      className="cursor-pointer"
      role="presentation"
      src={item.path}
      alt=""
    />
  ));
  return <AliceCarousel items={items} />;
};

export default MainCarousel;

I was tried with URL its working fine, but when I tried with local storage but no luck, I don’t understand how it will work. i am beginner in learning react.

Tags:

2

Answers


  1. 0

    The logic you provided seems fine if I understood correctly what you are trying to explain. I think there is a little bit of misunderstanding in your wording, as you mean that the images are saved locally inside your project and not in localStorage, which is browser’s storage object.

    As to why your code is not working, I’d like to know if there is some kind of error showing in the console logs.

    It can be the file extension in uppercase, being the original in lowercase if you are on Linux (Windows is case insensitive so that should not be the issue if you are working in Windows). Other hypothesis could be that the path should not contain /src/images/{image} and just be named images/{image} since the parent path is usually src/ for module resolution.

    Be that as it may, it’s difficult to know without you providing what you tested, what you expected and which errors showed up.

    Login or Signup to reply.
  2. 0

    try the below codes

    Make sure that you can access the relative path of your local images.

    for example, http://localhost:3000/images/Home2.PNG

    import React from "react";
import { mainCarouselData } from "./MainCarouselData";
import AliceCarousel from "react-alice-carousel";
import "react-alice-carousel/lib/alice-carousel.css";

const MainCarousel = () => {
  // add a unique key for each img ✅
  const items = mainCarouselData.map((item, i) => (
    <img
      className="cursor-pointer"
      role="presentation"
      src={item.path}
      key={`${item.path}` + i}
      alt=""
    />
  ));
  return <AliceCarousel items={items} />;
};

export default MainCarousel;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search