0

I'm attempting to import images into an array in React JS. My intention is to be able to map through the array and have the images appear one as a time. However, my images are not being properly resolved. I'm fairly certain it is a syntax error of my doing, but I'm just not able to solve this. I'm currently a student who is just learning react, so any and all help is much appreciated!

import universe from "./images/universespider.jpeg"

let content = [
    {
        title: "Universe",
        image: universe,
        author: "Alex",
        date: "09/09/8099",
        blog: "Spider-Man is in different universes.",
    },
]

import "./blogs.css"
import content from "../../content"

export default function blogs() {
    return (
        content.map((blog, i) => (

        <div key={i}> 
        <div className="blogBox">
            {blog.title}
            {blog.image}
            {blog.author}
            {blog.date}
            {blog.blog}
            </div>
        </div>
        )
    ))
}

Error Message

Jake Worth
  • 5,490
  • 1
  • 25
  • 35
StolenAvalanche
  • 1
  • One explanation here is that "universespider.jpeg" doesn't exist,or isn't in the correct location relative to your import. What does `ls src/` from the root directory return? – Jake Worth Nov 23 '21 at 14:51

1 Answers1

0

You can't use imported images directly, in your case you should use element and pass your image as a source.

Instead of

{blog.image}

try this

import universe from "./images/universespider.jpeg"

...

<img  src={universe} alt="universe"/>

More information about this assuming that your app was created with CRA.

Dmitriif
  • 2,020
  • 9
  • 20