英文:
Image doesn't show on website. I downloaded the image and i used the local url
问题
I wanted to show some png, but when I added the local URL to src, it didn't.
I used URL in Login.js
and here is my img tag:
<img src='../../../logos/google.png'/>
英文:
I wanted to show some png, but when I added the local URL to src, it didn't.
I used URL in Login.js
and here ise my img tag:
<img src='../../../logos/google.png'/>
答案1
得分: 1
这里似乎存在两个基本问题。
基本 URL
需要从基本 URL 计算相对路径。在 <img> 的 src 属性的情况下，基本 URL 是浏览器地址栏中显示的 HTML 文档的 URL。（可以使用 <base> 进行覆盖，但这在本十年中很少见）。
这里不清楚页面的 URL 是什么。从您的截图中可以推断，您正在从 Next.js 页面的源代码文件路径计算它。这与浏览器获得的 URL 非常不同。
最终 URL
还需要计算到图像的 URL 的路径。同样，您正在使用文件路径进行工作。截图显示 logos 文件夹甚至不在 public 文件夹内，因此图像可能根本没有 URL。
您需要：
- 为图像提供一个 URL
- 计算到该 URL 的相对路径
如果您正在使用 Next.js（根据文件夹结构的假设；您没有告诉我们您是否使用），那么您可以考虑导入图像（请参阅文档），这将导致 Next.js 为图像生成一个 URL 并自动传递给组件。
英文:
There appear to be two basic problems here.
The base URL
A relative path needs to be computed from the base URL. In the case of the src attribute of an <img>, the base URL is the URL of the HTML document as displayed in the address bar of the browser. (This can be overridden with <base> but that is rarely done this decade).
It isn't clear what the URL of the page is here. The implication from your screenshot is that you are computing it from the file path of the source code of a Next.js page. That's very different to the URL that the browser gets.
The final URL
The path also needs to be computed to the URL of the image. Again, you are working to a file path. The screenshot shows that the logos folder isn't even inside the public folder, so the image probably doesn't have a URL at all.
You need to:
- Give the image a URL
- Compute the relative path to that URL
If you are using Next.js (which is a supposition based on the folder structure; you haven't told us you are using that) then you might consider importing the image instead (see the documentation) which would cause Next.js to generate a URL for the image and pass it back to the component automatically.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论