I uploaded an image to my web server just like all the images are. I created it in Photoshop and exported to a .png. The image resides under The code is src="" But the browser shows that the image does not exist. I've set permissions to 0777, I've changed the image path, tried a different image in the same path to confirm it's reading the path right, and the image will just not show. You can view the link here, it will show nothing
EDIT: This is what the image is suppose to look like
EDIT: Removed links for privacy
You forgot " at the end.
It should be like this:
src="img/SccBridgeLogo.png"
OR
Try adding / at the beginning of the path, that should tell the browser to search from index directory.
src="/img/SccBridgeLogo.png"
Note this only works if you are running on a site, running from index.html in browser will return in
File:////
I had to use the picture tag for fallbacks and came across this issue at that point.
This use to work fine
<img src="images/netgraph-logo.png" alt="NetGraph Logo">
After adding the picture tag
<picture>
<source srcset="images/netbob-logo.webp" type="image/webp">
<source srcset="images/netbob-logo.png" type="image/png">
<img src="./images/netbob-logo.png" alt="NetBob Logo">
</picture>
In my case I was able to go down one folder from the root folder, therefore "./" preceding the rest of the url worked fine. You may need to back up several folders instead though, so be sure you are using the correct type of path.
Related
I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"
Just learning to code. And would like to know why my images aren't showing on my browser(s). Both Firefox and safari. I'm using an iMac computer (which is not a problem anyway).
Here is an example of the code:
<img src="images/fish08.jpg" alt="Big Fish" width="250" height="200">
Something must be wrong with your source path. Your code should work if this is your folder structure:
- fileWithImageElement.html
- images
- fish08.jpg
Please read HTML file paths to see which one you should use.
I have the following <img> tag in a static HTML document.
<img src="foo.gif" alt="This is an animated gif image, but it does not move"/>
After I set its src attribute to point to a .gif file (i.e. foo.gif), the GIF appears as a static (or non-moving) image. How do I animate the GIF?
By default browser always plays animated gifs, and you can't change that behavior. If the gif image does not animate there can be 2 ways to look: something wrong with the browser, something wrong with the image. Then to exclude the first variant just check trusted image in your browser (run snippet below, this gif definitely animated and works in all browsers).
Your code looks OK.
Can you check if this snippet is animated for you?
If YES, then something is bad with your gif, if NO something is wrong with your browser.
<img src="http://i.stack.imgur.com/SBv4T.gif" alt="this slowpoke moves" width="250" />
Agreed with Yuri Tkachenko's answer.
I wanna point this out.
It's a pretty specific scenario. BUT it happens.
When you copy a gif before its loaded fully in some site like google images. it just gives the preview image address of that gif. Which is clearly not a gif.
So, make sure it ends with .gif extension
try
<img src="https://cdn.glitch.com/0e4d1ff3-5897-47c5-9711-d026c01539b8%2Fbddfd6e4434f42662b009295c9bab86e.gif?v=1573157191712" alt="this slowpoke moves" width="250" alt="404 image"/>
and switch the src with your source. If the alt pops up, try a different url. If it doesn't work, restart your computer or switch your browser.
I just switched the site from my working files to the server.
It worked fine when I uploaded it to my portfolio but once it was on the correct domain it stopped working. The image, instead of displaying, just shows up blank so I tried going to it's direct url.
Instead of it working it downloads the image instead of displaying it.
Here is the direct url: Direct url
My tag: <img src="images/login_header.svg" alt="Alright, lets start finding discounts!" />
My structure:
// root (BBCM)
//// images
////// login_header.svg
//// css
//// js
// end root
I have tried:
/images/url.svg
the direct url for the image
BBCM/images/url.svg
It works fine when it's on my portfolio but not on the correct domain.
Any ideas? When the image downloads it also displays the correct image so I am a bit lost here.
Is your server sending the .svg file down with the correct MIME type? It should be image/svg+xml.
See Nginx offers of downoload SVG instead of showing it for another question along the same lines.
Some browsers don't allow the IMG tag to support SVG files, you can however put it in an object with an image as fallback in case the browser fails to render.
<object data="image.svg" type="image/svg+xml">
<img src="fallbackimage.jpg" />
</object>
try use <object data="/images/login_header.svg" type="image/svg+xml"></object> instead
I have used HTML 5 audio tags like the following
<audio controls="control_2">
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\WAV\home_page_readout.wav" type="audio/wav"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\MP3\home_page_readout.mp3" type="audio/mp3"/>
<source src="D:\HND_grrrrr\Year_2\RoyWebsite\Sounds\ogg\home_page_readout.ogg" type="audio/ogg"/>
</audio>
Now when i load the page when it is not uploaded to a server it manages to work on chrome and IE, however on other browsers the player appears, but there appears to be no file as nothing happens when i press play.
Now when i put the page to the server (I am using USB webserver V8.2) i get nothing no matter what browser the players dont even show. I have tried changing the links to relative and nothing and ive checked that all my files are there and they are. They work when I click on the actual file on the server so i dunno.
Any help would be appreciated thanks :)
To solve the second half of your question, and potentially the first, use relative paths to load the audio files. So if your web server loads the file from /var/www/website/index.php, places the files in a closer path, ie /var/www/website/sounds, and then load the files from ./sounds/FILE_NAME.EXTENSION