如何在React 18中使用props.img

Question

我是 React 新手（遵循较旧的教程，但尝试在 React 18 中工作）使用 props，是否有最好的方法能够将图像导入 App.jsx？

除了这一点，其余的我都准备好了

<img className="card-image" src={KatieZ} alt="Olympic athlete Katie Zaferes"/>

在 Card.jsx -->

import "../css/index.css"
import KatieZ from '../images/katie-zaferes.png'
import Star from '../images/star.png'

function Card(props) {

    return (
      <section className="experience-cards">
        <div className="experience-item">
            <img className="card-image" src={KatieZ} alt="Olympic athlete Katie Zaferes"/>
            <p className="experience-text">Sold Out</p>
        </div>
        <div className="description-below">
            <div className="rating">
                <img className="star" src={Star} alt="Rating star" width={15}/>
                <p>{props.rating}</p><span>({props.reviewCount}) • {props.country}</span>
            </div>
            <p class="item-description">{props.title}</p>
            <p className="item-price"><span className="item-price">From ${props.price}</span> /  person</p>
        </div>
      </section>
    )
  }
  
  export default Card

在App.jsx中-->

import Card from './components/Card'

export default function App() {

  return (
    <div className="container">
      <Navbar />
      <Hero />
      <Card 
        img="../images/katie-zaferes.png"
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Life lessons with Katie Zaferes"
        price={42}
      />
    </div>
  )
}

Answer 1

您可以在 App 组件中导入 Katiez 图像..并将图像作为 props 中的 img 值而不是路径传递..

应用程序.jsx

import Card from './components/Card';
import KatieZ from '../images/katie-zaferes.png'

export default function App() {

  return (
    <div className="container">
      <Navbar />
      <Hero />
      <Card 
        img={Katiez}
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Life lessons with Katie Zaferes"
        price={42}
      />
    </div>
  )
}

Cards.jsx

import "../css/index.css"
import Star from '../images/star.png'

function Card(props) {

    return (
      <section className="experience-cards">
        <div className="experience-item">
            <img className="card-image" src={props.img} alt="Olympic athlete Katie Zaferes"/>
            <p className="experience-text">Sold Out</p>
        </div>
        <div className="description-below">
            <div className="rating">
                <img className="star" src={Star} alt="Rating star" width={15}/>
                <p>{props.rating}</p><span>({props.reviewCount}) • {props.country}</span>
            </div>
            <p class="item-description">{props.title}</p>
            <p className="item-price"><span className="item-price">From ${props.price}</span> /  person</p>
        </div>
      </section>
    )
  }
  
  export default Card

Answer 2

React 18 视频教程帮助我了解了如何在 React 18 中处理图像。我们可以在不同的地方托管图像：

1. 在本地服务器上，public文件夹：

    <Card img="./images/katie-zaferes.png">
   

   为了完成这项工作，我们需要在项目的

   public

   文件夹中创建

   images

   文件夹并在其中放置

   katie-zaferes.png

   文件。因此文件在项目中的位置将是：

   public/images/katie-zaferes.png

2. 在本地服务器上，src文件夹：

    <Card img="../images/katie-zaferes.png" />
   

   我们的图像位于

   src/images

   文件夹中，因此我们需要像其他文件一样导入它：

    import katie from '../images/katie-zaferes.png'
   
    <Card img={katie} />
   

   这是更好的资产解决方案，因为它们在幕后得到了优化。

3. 在外部服务器上。在这种情况下，我们需要绝对 URL：

    <Card img="https://cdn.some.com/abc..x/katie-zaferes.png" />