React 18中如何动态设置图片src为远程URL？

问题1：require加载远程图片报错 #

require() 是Webpack等构建工具用于加载本地资源/模块的方法，远程图片URL不属于本地模块范畴，直接使用require(远程URL)会触发「找不到模块」的错误。

问题2：img标签报错“void element tag” #

错误根源在Card组件的子元素处理逻辑：

React.cloneElement(child, { ...props, key: i });

这里把Card组件的所有props（包括children、title、subtitle等）全部传递给了子元素<img>，而<img>是HTML空标签（void element），不允许拥有children属性，因此触发报错。

正确实现方案 #

1. 修复Card组件 #

修改CardBody内的子元素克隆逻辑，只传递必要属性（避免将Card的多余props传给子元素）：

export const Card = (props: {
  title?: string | null | undefined;
  subtitle?: string | null | undefined;
  borderColor?: string | null | undefined;
  children?: any;
}) => {
    const cardStyle = {
        borderColor: props.borderColor || '#ded3d3',
    };

    return (
        <div className="card-minhoteca" style={cardStyle}>
            <CardHeader title={props.title} subtitle={props.subtitle} />
            <CardBody>
                {
                    React.Children.map(props.children, (child, i) => {
                        // 仅传递key，不传递Card的多余props给子元素
                        return React.cloneElement(child, { key: i });
                    })
                }
            </CardBody>
            <CardFooter>
                <p>Card Footer</p>
            </CardFooter>
        </div>
    );
};

2. 修复Authors组件的图片引用 #

直接将远程URL赋值给img的src属性，移除require()：

export const Authors = () => {
    const authors = [
        {
            id: 1,
            name: 'Tayeb Salih',
            wikipedia: 'https://en.wikipedia.org/wiki/Tayeb_Salih',
            picture_url: 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Tayeb_saleh.jpg'
        },
        {
            id: 2,
            name: 'Adolfo Bioy Casares',
            wikipedia: 'https://en.wikipedia.org/wiki/Adolfo_Bioy_Casares',
            picture_url: 'https://upload.wikimedia.org/wikipedia/commons/a/a9/Bioy.png'
        },
        {
            id: 3,
            name: 'Lucy Foley',
            wikipedia: 'https://en.wikipedia.org/wiki/Lucy_Foley',
            picture_url: 'https://www.intrinseca.com.br/upload/autor/Lucy%20Foley%20G.jpg'
        },
        {
            id: 4,
            name: 'Matt Ruff',
            wikipedia: 'https://en.wikipedia.org/wiki/Matt_Ruff',
            picture_url: 'https://images.gr-assets.com/authors/1597587995p5/40577.jpg'
        }];  

    return (
        <section id="section-authors">
            <h1>Authors</h1>
            <div className="group-cards">
                {authors.map((author, index) => {
                    const borderColor = index > 1 ? null : index > 0 ? '#57b60a' : '#b60a57';
                    return (
                        <Card 
                            borderColor={borderColor} 
                            title={author.name} 
                            subtitle={author.id.toString()} 
                            key={author.id} // 建议用唯一id作为key，而非数组索引
                        >
                            <img src={author.picture_url} alt={author.name} />
                        </Card>
                    );
                })}
            </div>
            <img
                src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Bioy.png"
                alt="Adolfo Bioy Casares" // 补充有意义的alt文本
                height="200"
            />
        </section>
    );
};

额外优化建议 #

• 用作者的id作为key而非数组索引，避免列表更新时的性能问题和渲染异常。
• 给所有图片补充有意义的alt文本，提升页面可访问性。

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