-1

I have images like that:

<img src="img.webp" onerror="this.onerror=null; this.src='img.png'"/>

In the local documents it shows the webp images but on the server not. The folders and document are the same.

Can someone help? I havent found anything in the web.

Community
  • 1
  • 1
  • What happens instead? How is this related to Javascript or CSS? – Nico Haase Feb 17 '21 at 07:08
  • JavaScript because of onerror function. – Ghiath Sardast Feb 17 '21 at 07:12
  • Please add all clarification to your question. This should also explain what that code **should** do, and what it currently does – Nico Haase Feb 17 '21 at 07:13
  • Those quotes are intense, if you copy/pasted that I would try using standard [quote characters](https://unicode-table.com/en/sets/quotation-marks/), U+0022. A good text editor or IDE can help. – Ders Feb 17 '21 at 07:15
  • I also suggest removing the `onerror` attribute and adding [`alt`](https://www.w3schools.com/tags/att_img_alt.asp) to assist in debugging the initial failure to load. Use the browser devtools Network tab to view the error codes you are getting for the images. – Ders Feb 17 '21 at 07:17
  • The code should show the image in webp format but when a browser dont support webp format (onerror) it should show another image with the format png. When i test the website local, it shows the webp format rightly but when i test the website on a server it shows always the png format. – Ghiath Sardast Feb 17 '21 at 07:20
  • In the console its show for all webp images an 404 error code – Ghiath Sardast Feb 17 '21 at 07:22
  • @ders I know the quots here are not right but in html they are all right. – Ghiath Sardast Feb 17 '21 at 07:25

1 Answers1

0

I have found the problem. I must create a file name web.config in the root directory. The file must have the follow code code:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension="webp" mimeType="image/webp" />
    </staticContent>
  </system.webServer>
</configuration>