React通过props传递src属性时图片不显示问题排查

代码里存在两处JSX语法书写错误，导致props值没有被正确解析，直接以字符串形式渲染：

• Link组件的to属性错误地给JSX表达式外层加了双引号：写成了to="{props.path}"，此时大括号会被识别为普通字符串内容，不会执行变量读取逻辑。
• img标签的src属性错误地给props.src加了单引号：写成了src={'props.src'}，此时大括号里的内容是固定字符串'props.src'，不是读取props对象上的src属性。

修改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

如果你的项目是基于Create React App搭建，引用public目录下的静态资源时，建议图片路径前面加根路径斜杠，在父组件传值时写成src='/images/img-9.jpg'，可以避免页面处于嵌套路由时出现相对路径解析错误，导致图片加载失败的问题。

内容的提问来源于stack exchange，提问作者Shyju Chathampalli