使用 css 反应应用程序中的 img 加载和边框属性问题

Question

我有一个小型的 react 项目，但遇到了基本 CSS 的问题！ 我已经分享了这些文件以供参考，以便任何人都可以在他们的机器上试用以获得反馈/答案。 Github link

问题 1：图片无法加载。 我尝试了互联网上提到的所有东西 比如检查文件的路径和文件的拼写。一切似乎都很好。因为这将通过服务器运行，所以我看到链接是 https://localhost:3000/src/assets/img/images.jfif

我已经尝试过 src 是

src="./src/assets/img/images.jfif" 
src="src/assets/img/images.jfif" 
src="../../../src/assets/img/images.jfif" 
src="../../assets/img/images.jfif" 
src="File://I:/samples/Portfolio/portfolio2/src/assets/img/images.jfif"

似乎没有任何效果。

1. 移除边框属性时的奇怪行为！ 当我从 .portfolio__intro 中删除边框属性时，会发生一些奇怪的事情：) 边框：2px纯黑色； 简介的高度似乎下降了很多，我无法理解为什么会发生这种情况！

我已经在谷歌 chrome 和 Firefox 浏览器中尝试过。

有人可以看看并帮助我找出哪里出了问题，并分享有关为什么会发生此问题的知识吗？

Answer 1

尝试将图像放在您的公共文件夹中，您只需通过以下方式调用它们 src="./toto.png。或者，如果您想继续使用 assets 文件夹中的它们，则必须导入它们。

import Toto from "././src/assets/img/images.jfif"


export const test = () => {
    return (
        <div>
            <img src={Toto} alt="toto" />
        </div>
    )
}