html在div中插入图像标记在NetBeans中无法正常工作

ippsafx7 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(203)

<html>
<head>
    <title>mohit</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> 
        body{margin: 0}
        #mohit1{
            width: 100%;
            height: 211.5px;
            background: orange;
        }
        #mohit2{

            width: 100%;
            height:211.5px;
            background: white

        }
        #mohit3{
            width: 100%;
            height: 211.5px;
            background: green;
        }
    </style>    
</head>

<body>

    <div id="mohit1"></div>
    <div id="mohit2"> <center> <img src="C:/Users/WELCOME/Desktop/flag.png" width="210" height="210" alt="chakra" /> </center> </div>
    <div id="mohit3"></div>

</body>

当我在netbeans中运行这个页面时，它只显示了定义了宽度和长度的图像框架，而不是实际的图像。但是如果我用记事本运行，它运行得很好。

netbeans

来源：https://stackoverflow.com/questions/42021364/html-insert-image-in-div-tag-not-working-in-netbeans

2条答案

按热度按时间

vwhgwdsa1#

在HTML中，你有一个绝对的图像源，如果你只是把HTML文件加载到浏览器中，它会工作得很好，因为它知道在你自己的文件系统上查找。
而Web服务器不知道该怎么做，并且会有一个空的响应。解决这个问题的方法是将图像文件放在一个相对的文件夹中，例如：C:/path/to/project/img/flag.png个
并将src属性更改为img/flag.png
希望这对你有帮助

赞(0）回复(0）举报 2022-11-10

yrwegjxp2#

因为，你使用的是绝对图像路径。在HTML页面中使用图像的相对路径。为了实现这一点，在Web Pages目录下创建一个名为images的目录，如下所示：

然后将图像粘贴到该文件夹中。在HTML文件中，请这样使用

<body>
    <div id="mohit1"></div>
    <div id="mohit2">
        <center>
            <img src="images/ashoka_chakra.png" width="210" height="210" title="chakra" />
        </center>
    </div>
    <div id="mohit3"></div>
</body>

如果您对相对路径有任何混淆，请将指针放在src=""内，然后按Ctrl +空格键，您将获得自动完成功能，如下所示