C#•7mo ago

Slider Image

Why Im having an issue with the images not displaying correctly in the slider

30 Replies

ShuajbMOP•7mo ago

c#
 <div class="product-slider">
     @foreach (var image in Model.PetImages)
     {
             <div class="product-slider-item my-4" data-image="/images/pets/@image.ImageUrl"
                 data-slick-index="@Model.PetImages.IndexOf(image)"
                 aria-hidden="@(Model.PetImages.IndexOf(image) == 0 ? "false" : "true")"
                 tabindex="@(Model.PetImages.IndexOf(image) == 0 ? "0" : "-1")" style="width: 730px;">
                 <img class="d-block img-fluid w-100"
                     src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/default-image.webp" : "/images/pets/" + image.ImageUrl)"
                     alt="Pet Image">
             </div>
     }

     <i class="fa fa-chevron-right arrow-right slick-arrow"></i>

     <ul class="slick-dots" role="tablist">
         @foreach (var image in Model.PetImages)
         {
                 <li class="@(Model.PetImages.IndexOf(image) == 0 ? "slick-active" : "")"
                     role="presentation">
                     <img class="img-fluid"
                      src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/pets/dog1_1.jpg" : "/images/pets/" + image.ImageUrl)"
                         alt="Pet Image">
                 <p>@image.ImageUrl</p>
             </li>
         }
     </ul>
 </div>

c#
 <div class="product-slider">
     @foreach (var image in Model.PetImages)
     {
             <div class="product-slider-item my-4" data-image="/images/pets/@image.ImageUrl"
                 data-slick-index="@Model.PetImages.IndexOf(image)"
                 aria-hidden="@(Model.PetImages.IndexOf(image) == 0 ? "false" : "true")"
                 tabindex="@(Model.PetImages.IndexOf(image) == 0 ? "0" : "-1")" style="width: 730px;">
                 <img class="d-block img-fluid w-100"
                     src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/default-image.webp" : "/images/pets/" + image.ImageUrl)"
                     alt="Pet Image">
             </div>
     }

     <i class="fa fa-chevron-right arrow-right slick-arrow"></i>

     <ul class="slick-dots" role="tablist">
         @foreach (var image in Model.PetImages)
         {
                 <li class="@(Model.PetImages.IndexOf(image) == 0 ? "slick-active" : "")"
                     role="presentation">
                     <img class="img-fluid"
                      src="@(string.IsNullOrEmpty(image.ImageUrl) ? "/images/pets/dog1_1.jpg" : "/images/pets/" + image.ImageUrl)"
                         alt="Pet Image">
                 <p>@image.ImageUrl</p>
             </li>
         }
     </ul>
 </div>

Angius•7mo ago

What's the generated HTML look like?

ShuajbMOP•7mo ago

message.txt

Angius•7mo ago

Not what I asked for

ShuajbMOP•7mo ago

wym

Angius•7mo ago

The final, complete, generated, filled with data HTML that the browser gets Not the template code

ShuajbMOP•7mo ago

Angius•7mo ago

The HTML code

ShuajbMOP•7mo ago

this is the PetViewModel

Angius•7mo ago

Not a screenshot

ShuajbMOP•7mo ago

actually its Details.cshtml the code that i sent earlier

Angius•7mo ago

The GENERATED code Not the SOURCE code The browser does not receive the .cshtml template The browser receives the final, complete, generated HTML code I want that Not a screenshot Not the template The HTML Right-click the page in the browser and view page source

ShuajbMOP•7mo ago

do you mean inspect

ShuajbMOP•7mo ago

this one ?

Angius•7mo ago

Yes But the fragment that causes issues

ShuajbMOP•7mo ago

yeah wait there is an error <li class="" role="presentation"> <img class="img-fluid" src="/images/pets/dog2_2.jpg" alt="Pet Image"> <p>dog2_2.jpg</p> </li>

Angius•7mo ago

That's the image that does not show?

ShuajbMOP•7mo ago

yea its not showing i have a folder inside of wwwroot images/pets then i save the pet photos inside that folder

Angius•7mo ago

Well, does the file dog2_2.jpg exists in the folder wwwroot/images/pets?

ShuajbMOP•7mo ago

yes

ShuajbMOP•7mo ago