笑中取栗 2019-02-23 11:31 采纳率: 0%
浏览 527

bootstrap3的轮播图设置div背景图检查发现url(undefind)导致无法加载图片,什么原因?

bootstrap3的轮播图设置div背景图检查发现url(undefind)导致无法加载图片,什么原因?

##描述

使用bootsrtap3给页面添加轮播图,给轮播的元素是

<div class="item" style="background-image: url('img/slide_04_2000x410.jpg');"></div>

但是在chrome和opera浏览器中打开显示不了图片,检查元素发现元素变成了

<div class="item" style="background-image: url("undefined");"></div>

但是在Firefox中能够正常显示图片,检查元素也和想象的一样
##代码
HTML代码

<!--广告轮播-->
<section id="main_ad" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#main_ad" data-slide-to="0" class="active"></li>
        <li data-target="#main_ad" data-slide-to="1"></li>
        <li data-target="#main_ad" data-slide-to="2"></li>
        <li data-target="#main_ad" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active" style="background-image: url('img/slide_01_2000x410.jpg');"></div>
        <div class="item" style="background-image: url('img/slide_02_2000x410.jpg');"></div>
        <div class="item" style="background-image: url('img/slide_03_2000x410.jpg');"></div>
        <div class="item" style="background-image: url('img/slide_04_2000x410.jpg');"></div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</section>
<!--/广告轮播-->

css代码

#main_ad{
}
#main_ad > .carousel-inner > .item{
  height: 410px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

##截图
代码截图
图片说明

chrome的截图
图片说明
Firefox的截图

图片说明

补充

后面发现 的id为'main_ad'时会出现这个问题。改成其他名字就不会出现这个问题。怀疑因为过滤广告的原因使页面不能正常访问。但是我已经把过滤广告的插件给关闭了。还是会出现这个情况,后来直接重装浏览器,也不能解决。觉得可能是浏览器默认的广告过滤功能在搞怪

  • 写回答

1条回答 默认 最新

  • 略懂前端萌新 2019-02-25 15:30
    关注

    是的,我之前也遇到类似的事情只不过把浏览器的过滤广告关掉就行,迷人的浏览器

    评论

报告相同问题?

悬赏问题

  • ¥15 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
  • ¥15 MCNP里如何定义多个源?
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 STM32驱动继电器