标签内容中的 HTML 图像标签未呈现

Question

我正在尝试设计一个类类型为 nav-tabs 的 HTML div，并将选项卡内容作为图像，但图像未在 <div class="tab-content"></div> 中呈现。

但在 <div class="tab-content"></div> 之外工作.我不明白为什么会这样。

界面预览
_{(来源:toile-libre.org)}

文件结构

_{(来源:toile-libre.org)}

这是 HTML 语法

<div class="col-md-6" id="chart">
                <div class="col-md-12 selectboxit-container tshirt-chart-div">
                    <ul class="nav nav-pills" role="tablist">
                        <li role="presentation" class="active"><a href="#quote">Size Chart</a></li>
                        <li role="presentation" class="dropdown"> <a href="#" class="dropdown-toggle" id="drop4" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Product Type <span class="caret"></span> </a>
                            <ul class="dropdown-menu" id="menu1" aria-labelledby="drop4">
                                <li onclick="renderChart('roundNeck')"><a id="roundNeck" href="#quote">Round Neck T-Shirt</a></li>
                                <li onclick="renderChart('collarNeck')"><a id="collarNeck" href="#quote">Collar Shirt</a></li>
                                <li onclick="renderChart('hoodie')"><a id="hoodie" href="#quote">Hoddie</a></li>
                                <li onclick="renderChart('roundNeck')"><a id="hoodieZipper" href="#quote">Hoddie Zipper</a></li>
                            </ul>
                    </ul>
                    <div id="gender" class="btn-group" role="group">
                        <button type="radio" class="btn btn-default" name="gender" value="0">Male</button>
                        <button type="radio" class="btn btn-default" name="gender" value="1">Female</button>
                    </div>
                </div>
                <div class="col-md-12 bs-example">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#small">S</a></li>
                        <li><a data-toggle="tab" href="#medium">M</a></li>
                        <li><a data-toggle="tab" href="#large">L</a></li>
                        <li><a data-toggle="tab" href="#xlarge">XL</a></li>
                        <li><a data-toggle="tab" href="#xxlarge">XXL</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="small" class="tab-pane fade in active"><img id="cs" src="./img/chart/round-boy-s.jpg"></div>
                        <div id="medium" class="tab-pane fade"><img id="cm" src="./img/chart/round-boy-m.jpg"></div>
                        <div id="large" class="tab-pane fade "><img id="cl" src="./img/chart/round-boy-l.jpg"></div>
                        <div id="xlarge" class="tab-pane fade"><img id="cxl" src="./img/chart/round-boy-xl.jpg"></div>
                        <div id="xxlarge" class="tab-pane fade"><img id="cxxl" src="./img/chart/round-boy-xxl.jpg"></div>
                    </div>
                </div>
            </div>

Answer 1

问题出在我定义的 CSS
.tab-content>.tab-pane { 显示:无； }

删除它后图像正在渲染