I added some images and only the last two won't show up...maybe because it was naturally a smaller size?? I don't know...maybe someone here can help me....
Here is the part where i added them in my code
<div id="gallery">
<ul>
<li> <img src="images/studs/boss/thumbnails/boss0.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss0.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss1.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss1.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss2.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss2.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss3.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss3.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss4.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss4.jpg" class="pic" /> </li>
<li> <img src="images/studs/boss/thumbnails/boss5.jpg" class="mini" width="200" /> <img src="images/studs/boss/boss5.jpg" class="pic" /> </li>
</ul>
</div>
the same thing you see online is the same thing I see when I access my site with local disk (my laptop where everything is stored)
i checked with chromes developer tools and I am getting "failed to load resource.." from the local disk.......like I am testing it on my computer before uploading...thats what I mean by local disk...if that is the right way to say it
this is my folder to show file structure...
The images don't exist:
http://www.saucysbulldogs.com/images/studs/boss/thumbnails/boss4.jpg
Going directly to the image will give you a 404.
The images images/studs/boss/thumbnails/boss4.jpg and boss5.jpg were not uploaded, my browser can't access them...
Related
Why isn't my image showing up with the url I'm using? The url is valid and I used the same method to insert other images and it worked. First code is the url that isn't showing up and the other one are the images that are showing up. I have also included the images of what appears on the webpage for the unresponsive image as well as the responsive one.
<div>
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
<div class="project-grid">
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
<img class="project-image" src="http://via.placeholder.com/300" />
</div>
I don't understand what the issue I did the exact same thing for both but only the second group of images is showing up on my webpage.
You've got special character quote marks instead of regular ones surrounding the src attribute.
Change the ” character to ". Most likely it was converted in something like Word or Outlook.
Fixed HTML:
<img src="https://via.placeholder.com/150/0000FF/808080" alt="Profile Pic" />
You used "https://...." for the profile picture, but if your development server is on "http://...", then the profile picture won't show up due to cross-protocol restrictions.
Change
<img src=”https://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
to
<img src=”http://via.placeholder.com/150/0000FF/808080” alt="Profile Pic" />
On our magento category pages, I have added a static block at the top. This static block contains 3 images.
The 3 images appear on Chrome and Internet Explorer. But on Firefox, none of the images show.
On chrome and IE, the code displays the 3 images and it looks like this:
<p>
<a href="">
<img width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img width="250px" height="135px" src="img3.jpg" />
</a>
</p>
But on firefox, it adds the class="qluzuqkroyuyuepwnuwm" on the img tags.
<p>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img1.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img2.jpg" />
</a>
<a href="">
<img class="qluzuqkroyuyuepwnuwm" width="250px" height="135px" src="/img3.jpg" />
</a>
</p>
I have no idea what that class is or why it gets added on there only on firefox.
Does anyone have any ideas on why a class gets added on firefox only, and why the images don't show?
Thank you.
God, I am an idiot.
Adblock was turned on and it blocked my images /facepalm
Really sorry everyone, I thank anyone who read this post or brief investigation.
I am trying to create a view with a list of images.
This is my code:
<ul class="gallery">
#foreach (string item in Model)
{
<li>
#{
string parameterValue = "/PhotoGallery/" + item.ToString();
}
<img src=#parameterValue height="180" />
</li>
}
</ul>
I have problems when the file name contains space.
Example:
<li>
<img src=/PhotoGallery/DSC_0901.JPG height="180" />
</li>
<li>
<img src=/PhotoGallery/name with space.jpg height="180" />
</li>
I get the error:NetworkError: 404 Not Found - http:// localhost:6538/PhotoGallery/name
You've missed the double quotes it should be:
<img src="#parameterValue" height="180" />
I have new code on my website and a portion of my image icons are not clickable. The url shows up so it is reading the a tag but you cannot click the picture. Any insight would be helpful.
http://staging.pinupgirlclothing.com/retrodresses/lush-dress-swan.html
see shop the look
html layout is:
<ul class="box-content">
<li class="item first">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/s/p/sp-15252-pk_01t.jpg" width="115" height="150" alt="Floozy Kiss Lock Purse in Baby Pink Size- 939450" title="Floozy Kiss Lock Purse in Baby Pink Size- 939450" />
</div>
</li>
<li class="item">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/i/l/il-hs-bk_01.jpg" width="115" height="150" alt="Vintage Style Sheer Hair Scarf in Black Size- 952104" title="Vintage Style Sheer Hair Scarf in Black Size- 952104" />
</div>
</li>
<li class="item last">
<div class="item-info">
<img src="http://staging.pinupgirlclothing.com/media/catalog/product/cache/1/small_image/115x150/9df78eab33525d08d6e5fb8d27136e95/f/i/fi-032jelly-bk_01_1.jpg" width="115" height="150" alt="Dragonfly Jelly Peeptoe Flats in Black" title="Dragonfly Jelly Peeptoe Flats in Black" />
</div>
</li>
</ul>
This code in main.js is your problem. Don't preventDefault if you don't want the default behavior (following the link) to be prevented:
$('.product-view a.product-image').on('click', function(e) {
e.preventDefault();
});
This is a funny one.
I have a page using knockoutjs.
Everything works fine apart from one of the images in the page that doesn't show.
My HTML
<div class="cyclerItem"> #*Views and Visitors*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
</div> #* Container ends*#
</div> #* scroll *#
</div> #*modul content 4 4 *#
</div>
</div> #* Cykler filter text*#
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
My HTML rendered on the Client:
<div class="cyclerItem">
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/City.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
<div>
<a id="modal-launcher4" > Business Unit </a>
<div id="modal-content4" class="arrow_box">
<div id="scroll4" class="scroll4">
<div id="container3column" >
<div id="primary1">
<p>Business Unit</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': businessUnits.businessUnitsList">
<li data-bind="'text': title, 'click': goToFunctions""></li>
</ul>
</div>
<div id="content1">
<p>Function</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': functions.functionsList">
<li data-bind="'text': title, 'click': goToDepartments"></li>
</ul>
</div>
<div id="secondary1">
<p>Department</p>
<ul>
<li>All</li>
</ul>
<ul data-bind="'foreach': departments.departmentsList">
<li data-bind="'text': title"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="~/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilter">
<img class="toggleImg" src="/Content/imgs/Globe_Alt.png" width="30" height="30" />
</div>
<div class="cyclerFilterText">
Geographies
</div>
</div>
as you can see there only one small difference, one of the image have the source where the tilde (~) didnøt get resolved inot the right path.
It's only that one image in that position, if I change the source to another path it still does not work, but as you can see the next image is exactly the same but it works...
something to do with mvc messing around because of the knockout code?
Or maybe just a simple error in my html that make MVC get crazy? First coming first serving. :)
I actually found the problem. It's probably a pure HTML problem.
There is an extra double quote at the end of one attribute in a li tag. :)
I made some tests and it doesn't matter where but if any attribte in any tag as an extra double quote, that img stop working. I wonder why that img src and not something else.