Is there a way to import images without defining a name in a React JSX file?

Question

I was trying to create a Menu Site by using ReactJS. I had some components they were all working fine,but my only problem is that my Images do not display. I had a range of Datas and I wanted to use images for them. They didn't work the triditonal way that we say;

import React from "react";

const FoodMenus = [
 {
    name: "Pizza Margherita",
    ingredients: "Tomato and mozarella",
    price: 10,
    photo: "../assets/margherita.jpg",
    soldOut: false,
  },
...
]

I tried all the ways of importing images like;

import React from "react";

const FoodMenus = [
 {
    name: "Pizza Margherita",
    ingredients: "Tomato and mozarella",
    price: 10,
    photo: "/src/assets/focaccia.jpg",
    soldOut: false,
  },
...
]

This didn't work as well.

Answer 1

you can try this

    import React from "react";
    import photo1 from "../assets/margherita.jpg";
    const FoodMenus = [
    {
     name: "Pizza Margherita",
     ingredients: "Tomato and mozarella",
     price: 10,
     photo: photo1,
     soldOut: false,
    },
    ...
    ]