Images aren´t loading in React

JavaScript
1

Hey, I´m currently building my portfolio page in React and I´m trying to implement pictures of my recent projects but somehow they aren´t loading. I´m using a Data.js for all the info about the projects.

My Projects.js component:

import { CodeIcon } from "@heroicons/react/solid"
import { projects } from "../Data.js";

function Projects() {
    return (
        <section id="projects" className="text-gray-400 bg-gray-900 body-font">
          <div className="container px-5 py-10 mx-auto text-center lg:px-40">
            <div className="flex flex-col w-full mb-20">
              <CodeIcon className="mx-auto inline-block w-10 mb-4" />
              <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
                Apps I've Built
              </h1>
              <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
                facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
                fuga dolore.
              </p>
            </div>
            <div className="flex flex-wrap -m-4">
              {projects.map((project) => (
                <a
                  href={project.link}
                  key={project.image}
                  className="sm:w-1/2 w-100 p-4">
                  <div className="flex relative">
                    <img
                      alt="gallery"
                      className="absolute inset-0 w-full h-full object-cover object-center"
                      src={require(project.image)}
                    />
                    <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                      <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                        {project.subtitle}
                      </h2>
                      <h1 className="title-font text-lg font-medium text-white mb-3">
                        {project.title}
                      </h1>
                      <p className="leading-relaxed">{project.description}</p>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      );
}

My Data.js:

export const projects = [
  {
    title: "Weather App",
    subtitle: "HTML//CSS//JS",
    description: "A weather application using the openweather api.",
    image: "../assets/weather-app.png",
    link: "https://verdant-custard-960952.netlify.app/",
  },
  {
    title: "Currency Converter",
    subtitle: "HTML//CSS//JS",
    description: "A currency converter using the exchangerate api.",
    image: "../assets/currency-converter.png",
    link: "https://currency-converter-rb.netlify.app/",
  },
]

And this is my folder structure:

  • assets
    —> pictures
  • components
    —> Projects.js
  • Data.js

Maybe someone can help me figure it out.

2

hello and welcome back to fcc forum :slight_smile:

  • only pictures are not loading? but all other data is available for rendering?
  • if so then is it showing any error messages for those images?

also having a live link to see this in action makes it more easier to troubleshoot, happy coding :slight_smile:

3

Thanks for your answer :slight_smile:

Yeah it´s only these pictures that aren´t loading.
The error message is:

Cannot find module ‘…/assets/weather-app.png’

How do i be able to give you a live link?

4

Hello!

You can quickly get the site live by deploying it in GitHub Pages for free:

This will give us the chance to check your site in developer tools. I was able to solve similar problems by finding the correct import path in the past.

1 Like
5
  • seems like “picture” is not found from that given “path”
  • try to troubleshoot this by first simply “render” one picture from that folder and then when successful use that similar path to your dataset for actual image rendering

happy coding :slight_smile:

6

Now I see the three dots. I can’t tell if the dots are from your code or just from formatting the text snippet, that’s why I need the original link.

Every dot and slash counts on a path to an asset.

7

i think that actually comes from the formatting.
here is the whole project: GitHub - deucenn/rb-portfolio

I will try to figure out GitHub pages when I have some free time :smiley:

8

For anyone with a same problem, I figured it out.

i needed the picture to be in a folder in “public” and not in “src”.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.