我正在尝试从Skills.tsx文件导入图像并将其作为道具传递给Skill组件。图像路径如下：
http：//www.gov.com/cn.cn网站首页
下面是我的Skills.tsx文件的外观：

import React from 'react';
import Skill from './Skill';
import HtmlLogo from '../public/image/skill-logos/html.png';

function Skills({}: Props) {
  return (
    <div>
        <h3>Skills</h3>
        <h3>Hover over a skill for current proficiency</h3>
        <div>
            <Skill 
              imageSource={HtmlLogo} 
              proficiency="80"
            />
        </div>
    </div>
  );
};

export default Skills;

下面是我的Skill.tsx文件：

import React from 'react';

type Props = {
    imageSource: string;
    proficiency: string;
};

function Skill({ imageSource, proficiency }: Props) {
    return (
        <div>
            <img 
                src={imageSource}
                alt='' 
            />
            <div>
                <p>{proficiency}%</p>
            </div>
        </div>
    );
};

export default Skill;

到目前为止，它没有渲染图像，但它确实渲染了熟练程度。
到目前为止，我已经尝试使用require（'image_path '）来导入图像，但是没有成功。如果有人知道哪个方法有效，我会非常感谢它。