locked
Loosin' hair over scaled images not showing

    Question

  • I've created  scaled versions of all mandatory images and most of the other images used within the app, given them all the query string on end of the name, i.e. imageName.scale-180.png but now the images don't show at all!!  I'm really miffed. 

    The images are just created in Paint, each has 4 versions :
    xxx.scale-80.png
    xxx.scale-100.png
    xxx.scale-140.png
    xxx.scale-180.png

    Have read all the info on http://msdn.microsoft.com/en-us/library/windows/apps/hh831183.aspx and many other helpful pages MS has offered but to no avail. 

    Have tried adding the scale-nnn.png part into the code & app manifest and tried without the scale query as recommended in the documentation. 

    There's probably something small that I've missed, if you can help please do, I'm loosin' hair over it at the moment, am just this one step away from uploading the app.

    Tuesday, May 7, 2013 6:21 AM

Answers

  • Try putting a / at the beginning of the URI, as in src="/images/RRGreenYellowlogo2.png". The leading / makes sure you're referencing the image off the package root.

    • Marked as answer by RodgerC Thursday, May 9, 2013 9:13 AM
    Wednesday, May 8, 2013 2:53 PM

All replies

  • It sounds like you have the right concept. Can you demonstrate how exactly you are showing the images? If you can upload a minimal sample to your Skydrive that would be ideal.

    If you can let us know which language and UI layer you are using we can forward you to the correct forum.

    --Rob

    Tuesday, May 7, 2013 7:09 PM
    Owner
  • Tried the suggestion from above link but no success, even tried using upper case for Scale as in that example, but thanks

    Rodger Campbell

    Wednesday, May 8, 2013 6:22 AM
  • Am using JavaScript & HTML. Here's a line from start page:

    <div id="logoContainer"><img id="logo" src="images/RRGreenYellowlogo2.png" /></div> 

    I have RRGreenYellowlogo2.Scale-100.png and same for Scale-140 & Scale-180 all in same folder.

    All the images needed in package.appxmanifest also have same scale-nnn including one for scale-80.

    The .Scale-nnn query string seems to actually change the file name of image rather than just adding a "query string", as now in appxmanifest I'm getting little red dots with white x in them saying the file name refers to a file that's not in current project. I did the suggestion in the link above i.e. adding scaled images to project then deleting images without .scale-nnn in the name.

    The only images that are showing are ones that have no scaled version or have original unscaled version in project.

    Interesting - all of wide logo, small logo, logo, and store logo have the error but not splash screen, but they all have same naming, and all don't show.


    Rodger Campbell

    Wednesday, May 8, 2013 6:45 AM
  • In c# and vb this can all be done in the appmanifest designer. Is it not the same for java & html ? Because the scaled images are renamed with the scale suffix (postfix, affix ? I never know which) I think your code is now looking for a non existent image, try something like

     <div id="logoContainer"><img id="logo" src="images/RRGreenYellowlogo2.scale-80.png" /></div> 

    Are you sure that your image sizes are the correct pixel height and widths for their respective scalings.

    Wednesday, May 8, 2013 11:01 AM
  • Are the images added as content deployed in the package? If they are just dropped in the project directory they wont be available when the project deploys and runs.

    Can you repro this in a minimal sample you can share? Being able to see the images and how the project is laid out would help.

    --Rob

    Wednesday, May 8, 2013 2:38 PM
    Owner
  • Try putting a / at the beginning of the URI, as in src="/images/RRGreenYellowlogo2.png". The leading / makes sure you're referencing the image off the package root.

    • Marked as answer by RodgerC Thursday, May 9, 2013 9:13 AM
    Wednesday, May 8, 2013 2:53 PM
  • Hi Kraig, that slash fixed the image hard coded into the html well.  Many thanks for that.  Didn't do anything for images in appxmanifest though. 

    Would you believe it! I prepared a cut-down version for upload to SkyDrive as Rob suggested. Tested the sample out, worked fine, then excluded the image files as suggested in the first reply to this post that Peter DC, and yep you guessed it, it worked fine.  So I think I'll just transfer the rest of the code to the sample app then get the Cert.kit out.

    Many thanks for everyone's help.


    Rodger Campbell

    Thursday, May 9, 2013 9:13 AM