时间戳

首页 > 解决方案 > 图片未显示到 html 标头中

html - 图片未显示到 html 标头中

问题描述

我正在尝试从 url 加载图像，但是无论何时加载页面，它始终为 null 任何帮助将不胜感激

我也尝试过使用 src 属性并且也从 css 中做了它，但它仍然无法正常工作

这是我的标题的样子：

标题截图

这是我的代码：

html, body {
        margin:0;
        padding:0;
        background-color: #181A1B;
        height:100%;
        width:100%;
    }
    .logo{
        width: 50px;
        height: 50px;
        content:url("https://pasteboard.co/K18aDZ4.jpg");
    }
    .header{
        margin:0;
        padding:0;
        position:relative;
        background-color: #242627;
        height: 50px;
    }
    
    .profilepic{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        content:url("https://pasteboard.co/K18aDZ4.jpg");
    }
    .profile{
        margin-top: 10px;
        margin-right: 10px;
        padding: 5px;
        float: right;
    }
    
    #name{
        font-size: 15px;
        color: white;
    }
<html>
    <head>
        <link rel="stylesheet" href="homepage.css">
    </head>
    <header class="header">
        <img class="logo" />
        <div class="profile">
            <img class="profilepic" />
        <label id="name">ABCD</label>
        </div>
    </header>
    <body>
    
    </body>
    </html>

标签： htmlcss

解决方案

问题不在于您的代码

问题是图片链接

你可以放另一个图片链接，看看你的代码是完全正确的

例子：

html, body {
        margin:0;
        padding:0;
        background-color: #181A1B;
        height:100%;
        width:100%;
    }
    .logo{
        width: 50px;
        height: 50px;
        content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
    }
    .header{
        margin:0;
        padding:0;
        position:relative;
        background-color: #242627;
        height: 50px;
    }
    
    .profilepic{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
    }
    .profile{
        margin-top: 10px;
        margin-right: 10px;
        padding: 5px;
        float: right;
    }
    
    #name{
        font-size: 15px;
        color: white;
    }
<html>
    <head>
        <link rel="stylesheet" href="homepage.css">
    </head>
    <header class="header">
        <img class="logo" />
        <div class="profile">
            <img class="profilepic" />
        <label id="name">ABCD</label>
        </div>
    </header>
    <body>
    
    </body>
    </html>

无法识别图像

如果你小心点，当你打开链接时，图片会在几秒钟后显示出来

此外，链接的内容不仅仅是图像

使用包含图片内容的链接插入图片

注意：无论链接是什么，其内容都没有理由应该基于同一个链接

例如：

我认为因为链接的结尾是.jpg 你认为这个链接的内容肯定是图像，应该显示

但实际上并非如此。

链接可以是任何东西

我建议你阅读更多关于urls,headers和htaccess

推荐阅读