图像仅在给定链接时显示，而不是路径 [重复]

Posted 2023-02-22

【中文标题】图像仅在给定链接时显示，而不是路径 [重复]

【英文标题】：Image Only Shows When Given a Link, Not a Path [duplicate]

【发布时间】：2020-12-21 00:56:58

【问题描述】：

我正试图在我的网站上展示一张图片，但遇到的麻烦比我想象的要多。我已经多次这样做了，在其他项目上没有问题，但由于某种原因它不起作用。

html: <img src="./reddit.png"/>

我的图片和我的 html 文件在同一个文件夹中。

我的尝试

<img src="./reddit.png"/>

<img src="reddit.png"/>

<img src="../reddit.png"/>

<img src="D:project\src\components\reddit.png"/>

<img src="D:project/src/components/reddit.png"/>

我认为可能是标签的问题，所以我尝试了，

<img src="https://faroutmagazine.co.uk/static/uploads/2020/02/George-Harrison-Let-It-Be-768x464.jpg"/>

而且那个 img 显示得很好。我还尝试将 img 移动到图像文件夹并创建路径“/images/reddit.png”，但这也没有用。

（如果这对 HTML 有影响，我也在一个 js 反应组件中）

【问题讨论】：

你确定图片扩展是你加载的扩展吗？另外，检查您是否有权访问包含图像的文件夹

这能回答你的问题吗？ Correct path for img on React.js

【参考方案1】：

试试<img src="/src/components/reddit.png"/>，或者使用import关键字作为相对路径：

import reddit from './reddit.png';

【讨论】：

感谢您使用 import reddit from './reddit.png'; 和 <img src= reddit /> 成功了。