Question 45734 in CSS Question posted in
Some basic documentation can be found here.

img tag only shows outline – CSS

I want an img on my website but for some reason, I only get a square outline of where the img should be.

import img from "../assets/img.svg";

export default function Landing() {
  return (
    <img scr={img} alt={this is a img} className={styles.img} />
  );
}

Styles:

.img {
  width: 10em;
  height: 10em;
  object-fit: cover;
  z-index: 1000000;
}

I gave it a really big z-index so it would be on top but still, it doesn’t work. Also when I use another image like a png, it doesn’t work. This is what I get. My console doesnt give any warning or error just like my terminal in vs code

Do you guys know how to fix it??

Tags:

2

Answers


  1. 0

    I assume you are using the React Framework. Then I would
    advise to use the imported image as a Component itself.
    That should work. But name it something different, "img" is also
    a jsx tag. I would do the following

    import MyImage from "../assets/img.svg";

export default function Landing() {
  return (
    <MyImage alt="this is a img" className={styles.img} />
  );
}
    Login or Signup to reply.
  2. 0

    Spelling mistake of src is there in img tag

    
export default function Landing() {
  return (
  <img src={img} alt={this is a img} className={styles.img} />
   
  );
}```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search