C
C#3mo ago
ShuajbM

Slider Image

Why Im having an issue with the images not displaying correctly in the slider
No description
30 Replies
ShuajbM
ShuajbMOP3mo 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
Angius3mo ago
What's the generated HTML look like?
ShuajbM
ShuajbMOP3mo ago
Angius
Angius3mo ago
Not what I asked for
ShuajbM
ShuajbMOP3mo ago
wym
Angius
Angius3mo ago
The final, complete, generated, filled with data HTML that the browser gets Not the template code
ShuajbM
ShuajbMOP3mo ago
No description
Angius
Angius3mo ago
The HTML code
ShuajbM
ShuajbMOP3mo ago
this is the PetViewModel
Angius
Angius3mo ago
Not a screenshot
ShuajbM
ShuajbMOP3mo ago
actually its Details.cshtml the code that i sent earlier
Angius
Angius3mo 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
ShuajbM
ShuajbMOP3mo ago
do you mean inspect
ShuajbM
ShuajbMOP3mo ago
No description
ShuajbM
ShuajbMOP3mo ago
this one ?
Angius
Angius3mo ago
Yes But the fragment that causes issues
ShuajbM
ShuajbMOP3mo 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
Angius3mo ago
That's the image that does not show?
ShuajbM
ShuajbMOP3mo ago
yea its not showing i have a folder inside of wwwroot images/pets then i save the pet photos inside that folder
Angius
Angius3mo ago
Well, does the file dog2_2.jpg exists in the folder wwwroot/images/pets?
ShuajbM
ShuajbMOP3mo ago
yes
ShuajbM
ShuajbMOP3mo ago
No description
Angius
Angius3mo ago
Open the devtools, the network panel, reload the page See what images the browser tries to fetch and where from See the status codes
ShuajbM
ShuajbMOP3mo ago
there are 2 same files one is working the other not:
No description
No description
ShuajbM
ShuajbMOP3mo ago
No description
Angius
Angius3mo ago
2_1 comes from the cache There should be a checkbox in the network panel to disable cache Enable it and reload again See if the image still loads
ShuajbM
ShuajbMOP3mo ago
i disabled the cache still same
ShuajbM
ShuajbMOP3mo ago
No description
ShuajbM
ShuajbMOP3mo ago
No description
Angius
Angius3mo ago
You're... loading those images with jQuery? That's what the second screenshot tells me If so, then I'd say that's where the issue is
Want results from more Discord servers?
Add your server