React img 被危險地設置在 html 內部？

Question

這是我擁有的一些代碼，並且給了我一個錯誤。 我不知道錯誤是什么意思以及為什么它不顯示。

import React from "react";
import "./Card.css";

export default function Card() {
  return (
    <div class='card'>
        <img src='img_avatar.png' alt="Avatar" style='width:100%'> </img>
        <div class='container'>
            <h4><b>Devware</b></h4>
            <p>Description</p>
        </div>
    </div>
  )
}

我收到以下錯誤：

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

這是什么意思？

Answer 1

This is because you have a space between open <img> and closing </img> tags which is invalid, also React style prop should be an object and class should be className as class is a reserved javascript word so your Card component should be like這個

export default function Card() {
    return (
        <div className='card'>
            <img src='img_avatar.png' alt="Avatar" style={{ width: '100%' }} />
            <div className='container'>
                <h4><b>Devware</b></h4>
                <p>Description</p>
            </div>
        </div>
    )
}