My images are not loading properly when using Bootstrap v5 on my website. I have no issues with images in other parts of the site.
This is the HTML code I am using for the image:
<img border="0" src="example.com/img/kitties-long.png" id="placedTop">However, when I check the developer tools, I see that the image code is modified to include:
<img border="0" src=example.com/img/kitties-long.png" id="placedTop" hidden="" style="display: none !important;">It seems that
hidden="" style="display: none !important;"I tried various solutions, such as removing the !important tag, adding display: block !important in my CSS file, and even deleting the [hidden] element from the Bootstrap CSS file. However, none of these attempts worked as expected.
I have also attempted to use jQuery by writing
$("tag or #id or .className here").show()Here is the section of HTML where the image is located:
<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>
Additionally, I have created a JavaScript file named `unhide.js` to try and resolve the issue, but it also did not work as expected:
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 experimented with changing the order of my JavaScript files, placing `unhide.js` above or below `bootstrap.js`, but with no success.
Despite my limited knowledge in JavaScript and jQuery, I am proficient in HTML and CSS. I am puzzled as to why only this particular image is being hidden, while others display correctly.