Responsive Results Summary Card with Flexbox

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  Since the data file expects the memory image to be hosted at /public/assets/icon-memory.svg, you can store the image in the project at /public/public/assets/icon-memory.svg. That way, you can use the URL in the data file as an image source, without having to import the images:

  <img src={props.datum.icon} alt="" />
  

  If you want to keep importing the images in the JS, I think what you've got is fine! I'd move the images into /src, so that it's clear that they're part of Vite's bundling (and not static assets). If you want to get rid of the function, you can put the URLs in an object:

  const icons = {
    Memory,
    Reaction,
    Verbal,
    Visual,
  };
  
  function SkillCard(props) {
    return <img src={icons[props.datum.category]} alt="" />;
  }
  

  Marked as helpful

  1

  ---

  

  kasey•320

  @kaseyveePosted over 1 year ago

  @markuslewin Super helpful tips that I'll keep in mind for future projects! Many thanks for this!

  1