I try to get a base64 in my img src like this: <img src="data:image/jpg;base64,etc..."/> into my WordPress website through the visual composer in text mode. It's all working fine when I save it but when I edit it again the src attribute is just gone. The image does get displayed but the code disappears when I try to edit it. When I update it without editing anything it just saves <img /> without anything in it. So no image is shown. This only happens when my src starts with the standard base64. It stays when I just throw in a URL. What is going wrong here and how do I fix this?
Edit:
I use text block element which I would like to keep this way cause Im using a json plugin.
When I inspect it, it removes the: image/jpg part.
Use Visual Composer backend editor and add the img src code through 'Raw HTML' element.
I tried replicating your issues using this encoded image code
https://jsfiddle.net/casiano/xadvz/
<img src="data:image/gif;base64"/>
but I never faced that issue.
Related
Imagine this situation: I am making a website for a Minecraft server, and I forget to make a logo for the site, or I would like to just create it later. I want to keep the file name and HTML code all the same so it works when i finally change the logo. I do not want to save the file as a placeholder file due to caching issues, and I want to create an automatic placeholder image.
Example: I want to load this image:
images/funworldicon.png. But there is a problem, it does not exist at the moment! I do not want anyone's cache to save a placeholder version of the icon incase it exists again, so I want to set the file to a different image (like a placeholder) whenever the main image has an error while loading.
What is the solution to this situation?
I'm not sure what you mean exactly by not uploading the entire HTML file again. You'll end up replacing the HTML file anytime you make updates to the page. If you wanted to point to a dead link and have it fail back to a placeholder image you could do something like this:
<img src="images/funworldicon.png" onerror="this.src='images/placeholder.png'">
Which will use Javascript's onerror to replace the source of the image to the placeholder if funworldicon.png fails to load.
Live Example:
<img src="images/funworldicon.png" onerror="this.src='https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png'">
I am just getting started using HTML and I seem to have fallen at the first hurdle.
I am trying to create a basic webpage containing an image that is downloaded when clicked.
So far I have:
<a href="/images/selfie_img.jpg" download>
<img src="/images/selfie_img.jpg" alt="Selfie" style="width: 300px">
</a>
I expected this to display the image I want as it seems to my eye to be formatted exactly like all the examples I have seen. However, this only displays the alternative title, not the actual image.
I have checked the image path, and used different images to try and solve the problem. I am using VS code and the software can follow the image path to find the appropriate image, but when I load the program, the image is replaced by that annoying blue question mark. Using a URL as the image path seems to work but then the image isn't downloaded when clicked, I just get the URL.
Welcome to StackOverflow, SpicedWater!
The problem you're describing is most likely caused by a wrong path. Your browser resolves the images path and can't find it. I suggest you take a look at the source code in your browser or the developer console's network tab to see what path it's trying to find this image at and which http status code the browser determined.
Well, basically i created a image inside a div using the img tag in a HTML file that i've been writing and the image just wont show up on the browser. Inspect says the image cannot be loaded and it's CSS is set to 'display: none!important'.I wasn't able to untick it even in inspect. Can you help me?
No class was declared on the img tag and the div holding it.
I haven't written the 'display:none!important' css anywhere on the page.
3.There are other images in the same page which is displaying perfectly fine. I placed another image on the div which is holding my problem-image and even it is showing up. Renaming the image works too [Although i would like to know why].
The code used:
<div class="col-1"><img src="../Home-Page/images/twitter-logo-silhouette.png" alt="twitter"></div>
Any other image will work fine,The image is now kept renamed by finding it in finder, the error is gone now. But i still would like to know why it is so. If i rename it back. The error will appear once again.
Your adblocker is blocking the image out, i guess.
If you try to rename your file and alt tag without naming twitter it will work, as you mentioned above
I am working on Jet and now have to insert a image in the page. It should be very easy but now I am just not able to make this image shown in the page.
To ensure that there is no path error, I put the image and the html file in the same folder: src/js/views.
Below is the html code snippet:
<img src="xxx.png" style="width:89.25pt;height:18.75pt;" alt="xxx logo">
But the page just shows a broken icon but not this image.
Could you please help me out? Thanks in advance!
Two possible solutions:
Go to your browser's Dev Tools -> Network, and search for your image's request to server (If you cannot find it reload the page while keeping the Dev Tools open.) Does the URL path to the image look correct to you? If not, correct it.
If it still isn't working try using <image> tag instead. This worked for me.
I am trying to display an image on my website by using this simple code -
<img src="images/google-adwords-icon.png" border="0" alt="google-adwords" />
But on webpage, the image is not rendering; instead I am facing a very weird issue - the following code has been tracked by me in firebug -
<img class="xnunavyyqyfxajbvnknq" src="images/google-adwords-icon.png" alt="google-adwords" border="0">
But when i open this image in photo viewer then image is loaded properly - no issue with it.
How did it happen? I have no idea. How the class automatically added there? What language is it? And firebug says failed to load the given URL. Any idea?
EDIT -
I am not using any framework - neither PHP nor CSS/Javascript
I am not using any WISIWIG text editor.
No addon is being used by me.
I am working on localhost.
Path "images/google-adwords-icon.png" is 100% ok. Any other image on the same level is displaying.
Problem fixed! When i changed the file name from "google-adwords-icon.png" to "adwords-icon.png". It was only "google" which doing so weird but nobody knows the exact reason. But fixed it just now. Thanks to all.