Bootstrap js is adding hidden style display none to my images

I am using Bootstrap v5 and it appears to be preventing my images from loading. I am using images on other parts of my site that load without issue.

I write the following in html <img border="0" src="example.com/img/kitties-long.png" id="placedTop">

When I view my webpage through the developer tools. It reads: <img border="0" src=example.com/img/kitties-long.png" id="placedTop" hidden="" style="display: none !important;">

Basically hidden="" style="display: none !important;" is being added against my desire.

I went into the bootstrap css file and found [hidden]{display:none !important}.

I have:

  1. removed the !important from this piece and my images are still hidden
  2. removed the !important from this piece and added display: block !important into my css file but the images are still hidden
  3. deleted the [hidden] element from the bootstrap css file and then other pieces of my webpage failed to operate properly
  4. seen there are ways to possibly attack this with jQuery but I do not understand how to physically write the entire script code on my HTML page.

I have seen writing $("tag or #id or .className here").show() should work but I don't understand what or where this needs to be typed to work. I have seen writing it with tags in my head section or writing it in a .js file.

This is the whole html where my information appears:

<div class="ap-horz aboveCentral"><div class="ap-container" id="tAp"><img border="0" src="example.com/img/kitties-long.png" id="placedTop"></div></div>

I have written a .js file to try to find and block the code from loading but that does not appear to work either. The unhide.js file is:

function unhideFunction() {var hidingVar = document.getElementById("placedTop");if (window.getComputedStyle(hidingVar).style.display === "none") {document.getElementById("placedTop").style.display = "block !important";document.getElementById("placedBot").style.display = "block !important";}}

I have changed the order of my javascript files at the bottom of my html to put the unhide.js on top of the bootstrap.js and also tried them the other way.

I am pretty new with javascript and have very little jQuery experience. I understand html and css pretty well but do not understand why only this image is becoming hidden and not others.

3

Best Answer

It may be caused by AdBlocker (at least inside Opera browser). For me it blocks showing images of Amazon products from //ws-na.amazon-adsystem.com/widgets/q?.... (by adding the same style="display: none !important;")If I switch off AdBlocker extension, images appear

The problem was my Anti-Virus extension on Chrome. I had to White List the website. I hope this helps others.

Add Inline style in your div tag and imported in that it will override bootstrap style.

<img border="0" src="example.com/img/kitties-long.png" id="placedTop" style="display: none !important;">

Random Posts

SwiftUI - 2 Handle Range SliderHow to use lxc exc to issue multiple commands as specific userCypress Data Driven Testing with ExcelAngularjs, using data-ng-controller and ng-controller [duplicate]Formatting and logic errors in javaArray push and referencesResource exhaustion event: the JVM was unable to allocate memory from the heapTransform JSX to JS using babelWhat is the meaning of return only in JAVA? [duplicate]ESLint Parsing error: Unexpected tokenPrint number as reduced fraction in RHow to make edges of model smooth in React three fibreHow to see the retention for a particular topic in kafkaTapioca not generating correct RBI file for Rails modelCreating worse case scenarios with kruskal's algorithmIs there a tmux shortcut to create a new session?How do you auto format code in Visual Studio?xml:space="preserve" effect on space between XML attributes?"Insert if not exists" statement in SQLiteHow to output Integers using the Put_Line method?