• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 57
  • Last Modified:

Img not displaying

I'm having trouble with an image not displaying. It only shows the placeholder:

Placeholder
It's probably something basic that I'm missing. Everything else is working okay. The correct images and text is called for each slide. Thanks in advance to anyone who can assist me with this.

<?php 

/** 

 * This file is responsible for the rendering of the header of the front page. 

 */ 

?> 

<!-- Home Slider --> 

<div id="home"> 

    <!-- Banner Image --> 

    <div id="banner_image"> 

    <!-- Banner TEXT Slides --> 

    <div id="text_slider" class="top_slider"> 

        <?php 

        if (get_theme_mod('topslider_slides')) { 

            foreach (get_theme_mod('topslider_slides') as $slide) { 

                ?> 

               <div id="owl-item" class="owl-item">
<!-- CHANGE TO BE THE IMAGE FOR THIS SLIDE -->
   <img src="background-image:url(<?php echo $slide['slide_image']; ?>" />
 <div class="hero_text item"> 

                    <h3><?php echo $slide['slide_title']; ?></h3> 

                    <p><?php echo $slide['slide_desc']; ?></p> 

                </div> 

    </div> 

            <?php 

            } 

        } 

        ?> 
   </div>  

</div> 

<!-- Home Slider --> 

Open in new window


And the CSS

#text_slider {
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  height: 600px;
  left: 0;
  overflow-y: hidden;
  position: absolute;
  text-align: center;
  top: 0;
}

#owl-item {
 position: relative;
}
.owl-item img {
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-size:cover; 
    height:600px;  
    left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.owl-theme .owl-controls {
  margin-top: -50px;
  position: relative;
  text-align: center;
  z-index: 10000;
}

.hero_text h3{
    vertical-align: middle;
    font-size: 50px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}
.hero_text p {
    font-size: 18px;
    color: #fff;
}

Open in new window

0
Cathryn Warren
Asked:
Cathryn Warren
  • 6
  • 5
1 Solution
 
Ryan ChongCommented:
<?php echo $slide['slide_image']; ?>

Open in new window


apparently, can you check the value of $slide['slide_image'] ?

also check the html output generated, and see if the image pointing too really exists? you may make sure the relative path of the image is set correctly.
0
 
Cathryn WarrenAuthor Commented:
Thanks Ryan, yes the relative path is correct and it is calling the information correctly. I can see it in the source on the page.
0
 
Ryan ChongCommented:
yes the relative path is correct and it is calling the information correctly. I can see it in the source on the page.
could it be browser's cache? are you able to copy the relative path and paste into your browser to show that image alone?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Cathryn WarrenAuthor Commented:
I tried this as well. It does work. I have also tried it in multiple browsers, firefox, chrome and edge.
0
 
Ryan ChongCommented:
so is that all browsers such as firefox, chrome and edge behaved the same that image not showing up?
0
 
Cathryn WarrenAuthor Commented:
That's correct it doesn't show in any of the browsers. But pasting the relative path into each of the browsers does work.
0
 
Cathryn WarrenAuthor Commented:
If it helps here is a link.
0
 
Ryan ChongCommented:
<img src="background-image:url(http://www.mitchellwealthmanagement.com.au/wp-content/uploads/2016/11/test_shot.jpg">

Open in new window

shoudn't it be as:

<img src="http://www.mitchellwealthmanagement.com.au/wp-content/uploads/2016/11/test_shot.jpg">

Open in new window


? I think you mass up the CSS with HTML syntax
0
 
Ryan ChongCommented:
so try this instead:

<img src="<?php echo $slide['slide_image']; ?>" />

Open in new window

1
 
Cathryn WarrenAuthor Commented:
Yes that was the problem! Thank you!

Now I have a height distortion problem to fix...
0
 
Cathryn WarrenAuthor Commented:
Thank you Ryan!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now