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.
Related
In my small blazor project I want to display an image in a view as follows:
<img scr="img/background.jpg" class="img" alt="background">
But all I see in the browser is the 'alt'-text (sorry for the dark image, it's a dark themed website):
The image is located in wwwroot/img/background.jpg. Curiously enough in the same location is the icon of the webpage, which I call within the head portion of _Host.cshtml as follows
<link rel="icon" type="image/x-icon" href="/image/icon.png">
and that is showing fine.
Following other similar posts like this one, I have already tried to change the source path to any of the following:
scr="/img/background.jpg"
scr="~/img/background.jpg"
scr="img/background.jpg"
scr="~img/background.jpg"
None of which seem to work. So there are two questions: 1. What could be the issue to my problem and 2. How do I debug such "wrong path" type of errors. For the second part, my intuition would be to use the "view source" option in the browser and look for the image, but so far I have not found the location of the image as the server presents it to the browser. I have also tried to use a different browser, but with the same result.
Edit:
Navigating to the image with https://localhost:7001/img/background.jpg directly works as well. It just doesn't want to show from within the html for some reason...
<img scr="img/background.jpg" class="img" alt="wrong">
<img src="img/background.jpg" class="img" alt="ok">
See what i did there?
How do I debug such "wrong path" type of errors.
That is a good question.
With your App running, hit F12 in your Browser. Make sure you can see the "Dev Tools".
Select the Network tab and reload your page. Find the 404 error.
I have found the intellisense in Visual Studio added a path during development that seemed valid, but would not work at runtime. I had to change the following:
scr="~/myImage.jpg"
to the following:
src="myImage.jpg"
The location of the image in my example was in the root of wwwroot, so wwwroot/myImage.jpg
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.
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 use a background-image using a "root-relative" path like so : background-image: url("/img/bg.jpg");.
The property is correctly showing in Chrome but the image does not appear. If I change it to be http://localhost:8080/img/bg.jpg it appears.
If I visit http://localhost:8080/img/bg.jpg the image is visible.
If I add a <img style={{width:"100px", height:"100px"}} src="/img/bg.jpg"/> it also appears properly (I am using React).
I browsed SO for a moment and noticed several people having issues with url but none of them was similar.
In case there is any kind of link, I'm using Less with webpack-dev-server. The image is in a static directory.
I finally managed to fix this issue thanks to issue #2248.
I simply disabled the source maps for css-loader and less-loader and that made the trick.
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.