I have an ASP.NET website running on II 7.5 that I'm trying to make mobile-friendly. For the most part it's working fine, however, I'm finding that none of my images will load when viewed with a mobile browser. When I try to view any of the images directly through the URL on a mobile browser, I get an ASP.NET "Access to the path [path] is denied", but the path it references is at a location that doesn't exist in the file system (my website's path followed by "/App_Data/Cache/...").
I've been searching online extensively and tried quite a few resolutions to no avail (such as changing image sizes, setting the max-width on the img element to 100%, setting the width and heighth of the img tag to the exact width and heighth of the image, using background-image, etc). The error that shows up in Chrome Developer Tools is just 500 Internal Server Error -- I only get the above more-detailed error when I try to access the image directly.
An example of one method I've tried in css using background-image:
background-image: url("Images/heroIpad.jpg");
The only way I've been able to get images to display on a mobile browser is by converting the image to a base64 encoded string and hence not trying to load the actual image, but I can't do that for larger background images. The images all display fine on desktop browsers.
Any help provided is much appreciated!
Try this Mobile Browsers don't display images on website. You can do CMYK to Rgb conversion here Convert images from CMYK to the RGB color space or other options thru Google.
Related
I'm currently trying to display PNGs with react-three-fiber but when I set a texture with a transparent background it doesn't show.
I've tried many things but noticed that if I take the base64 of the image and load it into a img html element, it doesn't display either, otherwise, if I put it as an href for an a element, I can download it with no issue.
Here is a live exemple where you can download the file but not load it into an img:
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
You may open the sample in a separated tab as codesandbox is preventing file download from the reduced window.
If anyone ever experienced this, maybe something in the base64 is wrong.
Testing this same demo in Safari, it will work correctly. In Firefox and Chrome it does not. Data URIs are best used for small images — they add a ~30% size penalty to the data they store, and a significant amount of extra processing is required to display them. Browsers including Chrome impose limits on the supported length of Data URIs for this reason, see https://stackoverflow.com/a/41755526/1314762 for details on those limits.
I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
I have an issue in PDF exporting functionality in SSRS report.The report contains a PNG image with several lines.When I preview the report in browser(Both IE and Chrome) that image is displaying correctly but when I exported it to the PDF and open the file in PDF viewer software, the lines inside the image are getting blurry.
The image is loaded to a standard image control in SSRS report.I already have tried all the image size properties inside the image controller(like Original Size / Fit to size etc) and images with different resolutions, but still the issue is there. Please note that I can't change the image format from PNG to other one since I want to keep the image background as transparent.
Can someone help me to resolve this issue please?
This can be a number of things. Sometimes the image is fine but your screen resolution and the PDF viewer combined can make them look bad.
First, try to print the PDF and see if if still looks bad, if it looks OK printed then the chances are it's the screen resolution and/or PDF viewer causing it. I use Nitro PDF and they always look better than using Adobe Reader.
In anyway case, savingthe PNG with higher DPI setting will usually fix the issue. Typically I save PNG's at 600 dpi, which might be overkill but it does mean they are sharp on the PDF.
If you need a Windows tool to save at a different DPI, try Inkscape which is free. When you export images you can set the DPI to whatever you want. Try 600dpi and if that works.
I created a cross platform app using jQuery Mobile. When I test it on various browsers it works fine and displays all images with no problems. When I build it with Phonegap Build, transfer to my Android phone and test I have problems with some images displaying.
I have several similar pages where I display a picture on each page. The problem is that pictures display on some pages but not on others. I have ruled out file type as an issue (I am using .jpg, .jpeg and .png and I have at least 1 of each of these working fine) and I have ruled out the code as the issue as I have used working images on pages that werent displaying the image before to prove that it was the image itself at fault (the image displayed fine when I used one that was working from another page). I have also ruled out picture size, dpi and dimensions.
Does anyone have any ideas?
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices