通过道具传递 src 属性时反应图像未显示答案

【问题标题】：React image not showing while passing src attribute through props通过道具传递 src 属性时反应图像未显示
【发布时间】：2022-07-05 15:42:22
【问题描述】：

我正在尝试显示来自 public/images 文件夹的图像。试图将图像 src 传递给道具。我可以使用道具访问所有其他值，例如标签和文本。但是 {props.src} 和 {props.path} 没有提供预期的结果。而是按屏幕截图所示显示。请指教

卡片.js

import React from 'react';
import CardItem from './CardItem';
import './Cards.css';


function Cards() {
  return (
    <div className='cards'>
        <h1>Check out these epic destinations!</h1>
        <div className='cards__container'>
            <div className='cards__wrapper'>
                <ul className='cards__items'>
                    <CardItem
                        src= 'images/img-9.jpg'
                        text='Explore the hidden waterfall deep inside the amazon jungle'
                        label='adventure'
                        path='/services'
                    />
                </ul>
            </div>
        </div>
    </div>
  )
}

export default Cards

CardItem.js

import React from 'react';
import {Link} from 'react-router-dom';

function CardItem(props) {
  return (
    <>
        <li className="cards__item">
            <Link to="{props.path}" className="cards__item__link">
                <figure className='cards_item_pic-wrap' data-category={props.label}>
                    <img src={'props.src'} alt="Meditation image" className='cards__item__img' />
                </figure>
                <div className='cards__item__info'>
                    <h5 className='cards__item__text'>{props.text}</h5>
                </div>
            </Link>
        </li>
    </>
  )
}

export default CardItem

截图

【问题讨论】：

它应该是<img src={props.src} 而不是<img src={'props.src'} 在CardItem 内。
这只是一个愚蠢的错误，将src={'props.src'}更改为src={props.src}。

标签： reactjs react-props

【解决方案1】：

将src={'props.src'} 更改为src={props.src}

【讨论】：

请不要回答由错字引起的问题，因为这对将来没有任何帮助。而是写评论并投票关闭它。

【解决方案2】：

我也经常遇到问题。我使用 require() 来调用图像：

                <CardItem
                 src= ${require("image_path")}                            
                 text='Explore the hidden waterfall deep inside the amazon jungle'
                 label='adventure'
                    />

【讨论】：

【解决方案3】：

你可以用这个

<img alt="Meditation image" src={props.src} />

【讨论】：