reactjs - 我想通过道具接收图像

Question

我想通过道具访问图像。最后两个属性通过“道具”工作，但图像不工作。但如果在函数中添加图像而不是道具，则​​图像工作。

import React from "react";
import ReactDOM from "react-dom";

  function Card(props){
   return(
     <>
      <div className="cards">
      <div className="card">
       <img src={props.imgsrc}
         alt="Mypic" className="card_img"/>
         <div className="card_info">
          <span className="card_category">{props.title}</span>

             <h3 className="card_title">{props.sname}</h3>   
             </div>
    
      </div>
  </div>
 </>
);
 }

  ReactDOM.render(
 <React.StrictMode>
   <Card 
    img src="/image/german.jpg"
     title="lorium excepted"
     sname="unexcepted"/>
     </React.StrictMode>,
    document.getElementById('root')
    );enter code here



     

标签： reactjsreact-props

Answer 1

在我看来，img 和 src 之间有一个空间，您可以在其中传递道具。

 ReactDOM.render(
   <React.StrictMode>
     <Card 
      img src="/image/german.jpg"   <--- should be imgsrc="/image/german.jpg"
      title="lorium excepted"
      sname="unexcepted"/>
    </React.StrictMode>,
 document.getElementById('root')
 );