html 在 div 标签中插入图像在 NetBeans 中不起作用答案

【问题标题】：html insert image in div tag not working in NetBeanshtml 在 div 标签中插入图像在 NetBeans 中不起作用
【发布时间】：2017-06-20 15:42:44
【问题描述】：

<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 中运行此页面时，它只显示具有定义宽度和长度的图像框架，而不是实际图像。但是如果我用记事本运行它运行良好。

【问题讨论】：

你能把它变成 jsfiddle 吗？

标签： html css image netbeans web-applications

【解决方案1】：

在您的 HTML 中，您有一个绝对图像源，如果您只是将 HTML 文件加载到浏览器中，它就可以正常工作，因为它知道查看您自己的文件系统。使用 Netbeans 时，我相信它会设置本地网络服务器，并且浏览器会尝试从 localhost/C:/Users/WELCOME/Desktop/flag.png 获取文件

并且网络服务器不知道该做什么，并且将有一个空响应。解决此问题的方法是将图像文件放在相对文件夹中，例如： C:/path/to/project/img/flag.png

并将 src 属性更改为img/flag.png

希望对你有帮助

【讨论】：

【解决方案2】：

因为，您使用的是绝对图像路径。在 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 + Space 您将在 Netbeans 中获得如下所示的自动完成功能

这是最终输出

【讨论】：

我做了和你说的一样的事，但我得到的不是实际的图像，而是我放在 alt 标签下的名字
可能是您的图像相对路径不正确。正如我在回答中所说，使用控制空间来获得正确的路径。如果您为HTML 页面使用单独的文件夹，则相对路径可能是../images/ashoka_chakra.png 并确保在Web Pages 下创建images 文件夹。
我使用了控制空间来插入路径，但仍然是同样的问题。我的图片文件夹也在网页下
你能像我在回答中发布的那样发布 Netbeans 项目文件结构截图吗？所以，我可以很容易地理解你的问题。