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个回答

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

1
bootstrap<div contentEditable="true" > 编辑的时候 总是跳出 字体 修改的工具栏,如何禁用
1
d3.js怎么设置节点的背景图片??
1
bootstrap-treeview 能否设置背景图片?
2
bootstrap怎么将radio分组,组间不互相影响?
1
bootstrap3 modal 事件监听多次 关闭事件绑定未解除?
1
有关 bootstrap table 插件中的问题
1
bootstrap模态框中有图片,我如何将图片放大后显示在模态框上面阿,而不是像下面这样,有什么属性设置吗?
3
bootstrap css显示不出来
0
bootstrap导航条,在google chrome出现的问题
1
前端实现图片加视频一起轮播播放
1
bootstrap 的 visible-*,hidden-*属性在react项目中无法使用
1
怎么把网页1的导航完美移植到网页2的轮播图上边的位置使导航和轮播图结合成一个网页
1
帮我看下这个网页中的三个图片div的大小和位置怎么更改设置
1
页面使用bootstrap的remote: url弹出一个表单模态框,为什么关闭后bootstrap Table获取不到当前选中行的数据了?
3
css 能不能设置padding的颜色 不通过背景颜色设置
0
jQuery和bootstrap的题 帮帮忙!!!
1
bootstrap的导航条遮住了我的图片,如何将图片浮在这个当行条之上?
1
bootstrap样式本地导入无效
1
bootstrap table用getData获取一个可编辑栏位数据,第一次获取出来的数据是对的,但栏位里的数据更改后再进行获取,获取到的依然是第一次的值。这是为何?怎么解?
0
bootstrap Table怎么实现单元格合并