Html 试图从本地获取要显示的图像_Html_Css

Html 试图从本地获取要显示的图像

html css

Html 试图从本地获取要显示的图像,html,css,Html,Css,我很困惑。几个小时以来，我一直试图使用浏览器显示我的图像。它是来自本地文件的png图像： <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport", initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

我很困惑。几个小时以来，我一直试图使用浏览器显示我的图像。它是来自本地文件的png图像：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport", initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css"
    </head>
    <body> 
        <div>
            <div>   
                <p>
                    <img src="C:\Users\ezmes\Desktop\GruHopper\img\screem.png">
                </p>
            </div>
            <h1>Test</h1>  
                <p class = "text_title">Test</p>
        </div>
        <div class="two_buttons">     
            <div>
                <button class = "red_button">
                    <span class = "get_started">Get Started</span>
                </button>
            </div>
            <div class = "button2">
                <button class = "white_button"> 
                    <span class="have_account">I already have an account</span>
                </button>
            </div>
        </div>
    </div>

    <script src = "sandbox.js"></script>
</body>
</html>


我认为img src是错误的
您应该从.html文件开始添加img src，然后转到img文件
例如：
-测试文件夹
--index.html
--图像文件夹
---screem.png
因此，img src如下所示：
<img src="images_folder/screem.png">



希望这个答案能对你有所帮助。
我通常使用另一种方法。我将图片转换为base64并将其添加到代码中。不要担心你的网站会变慢。这没什么区别
有一个不错的在线站点，您可以将图片转换为base64代码，URL为：
我已经上传了一张图片并获得了以下代码：
看看这段代码，我将演示如何使用代码
我将在这里输入部分代码，因为这是关于堆栈溢出的规则。但这件不管用。如果你想全部检查出来，去我提交的链接
<img src=" data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD ... RRRQB//Z">

是错误的，这是因为如果html文件也作为本地文件访问，则可以访问本地文件如果您将页面上载到服务器或通过本地主机访问，则无法直接访问本地文件。为了使这项工作，而不是提供绝对路径，请将图片移动到html代码所在的文件夹中
示例

文件夹中的代码1

文件夹中的图像1/图像

所以你的src应该是

希望这能有所帮助。
我尝试了100种不同的方式来使用语法，但仍然无法在浏览器中显示。使用visual studio和live server在控制台日志中看到了什么？您需要将文件放入服务器的路径中。在chrome中，右键单击页面并选择inspect。一个新窗口将打开。转到console选项卡并键入window.location.href，让我们知道您在某个位置获得了什么您有一个未关闭的链接标记顺便说一句。@DCR-file:///C:/Users/ezmes/Desktop/GruHopper/img/screem.png@很高兴听到这个消息，实际上这是一个很好的方法，用于混淆图片中的代码。