javascript-将图像数据映射到图像标记的对象src

//Card.js
const Card = (props) => {
  const { id, name, description, img_data, tags, demo, github } = props.data;
  return (
      
      {description}
      
      
        {tags.map((t, id) => (
          #{t}
        ))}

    
  );
};

import display from "../assets/Images/mattball.png";

export const Work = [
    {
        id:1,
        name:"Agency Landing Page",
        description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.",
        img_data: display,
        tags:["react","gsap","styledComponents"],
        
        demo:"https://agency-website-eta.vercel.app/",
        github:"https://github.com/codebucks27/Agency-website"
    },
      /*
      ...
      ...
      ...
        */
]

这是我的目录布局：https://imgur.com/a/9uipHHl

在没有限制的情况下，我知道有很多方法可以实现这个标签的图像源。我希望看到一种可行的方法来实现这一点，因为我不确定它如何适用于这组特定的依赖项。