Phonegap on WP7 does not load images - windows-phone-7

I'm starting my first PhoneGap project and am developing using Visual Studio and Windows Phone 7, although I intend on ultimately deploying to iOS and Symbian as well.
However, I'm stuck at Step 1. I have added an image to the www/images folder, and put the following code:
<img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" />
And I get:
It works fine when I preview it in IE9, but I don't have a Mac to test it on iOS yet.
It's worth noting that the JS files and CSS have loaded fine, it's just any image (whether referenced in CSS or an <img> tag) always comes up broken.

My guess would be the Build Action of your image file is incorrect.
According to http://wiki.phonegap.com/w/page/48672055/Getting%20Started%20with%20PhoneGap%20Windows%20Phone%207#4Reviewtheprojectstructure section 4. You should be setting the Build Action of your images etc to Content which simply copies them into the output project when it is built. They are probably currently set to Resource or None.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.

I'm posting this to questions that I found while trying to find my answer to the same problem. The JS framework I use adds a url query to each image when in a debugging mode (in order to force browsers to reload image, instead of using cached). So, my image "image/background.jpg" would be accessed as "image/background.jpg?d=34342233". But, when running on PhoneGAP for Windows Phone, it won't recognize the image, and thus it shows up as broken. So, I had to turn off debugging for the framework I use, and suddenly the images showed up (still, don't forget to set the Build Action to "Content" as mentioned earlier).

Related

/public/img/ folder not acceping new assets in Go-compiled web app

I downloaded a binary via docker for the Gogs project (https://github.com/gogits/gogs), set it up (via docker pull gogs/gogs) and the server works as expected. Now I'm trying to customize the html a bit to look consistent with our company's other tools. When looking at deployed project, the assets of interest are in the following directories:
public/img/*.png
public/css/*.css
templates/*.tmpl
When I update the css, changes take effect right away, when I update tmpl, I need a container restart (implying that html is generated at server start time), when I update anything in public/img/ directory, however, I can't seem to get those assets used at all and I'm clueless about what's happening since most web servers/frameworks treat public/img/ as a static directory with all of its contents publicly visible by default.
Here is what I've tried so far and the outcomes:
Action: copied a new favicon image (my_favicon.png) into public/img/ and changed /templates/base/head.html to point to it (/img/my_favicon.png) instead of the original (/img/favicon.png), left original untouched and restarted the container.
Result: page loads with broken image icon, DOM inspector says that it's pointing to /img/my_favicon.png but doesn't show the image, going to that URL directly doesn't show the image either.
Action: change .tmpl back to point to original image (/img/favicon.png), overwrite original with the new image. I tried this with the main lg-gogs.png logo too.
Result: page loads with broken image icon just like before.
A grep search for image name revealed that only the .tmpl I modified and config.codekit are mentioning it (and I'm not at all familiar with CodeKit, but the instructions claim that it's only relevant for git, not me, and to leave the file alone, although it seems to profile names and sizes of all images - however I don't see anything else on the server reference this codekit file).
I have no idea why changes to css and tmpl work fine, but images cause this unexpected result. Does anyone have an idea of what's going on, why the server isn't accepting the images?

PTC Creo PZV file view in browser?

i have one app installed which is using arbortext ptc isoview /creo plugin to show files, so i wanted to make app to take snapshot of it in my IE, but cant find the way to load pzv file, if you just drag and drop it, does not work, i also tryed loadin via html, but seems my params are wrong?
solved, by ripping 3 java scripts and displaying full screen pvz file in webbrowser and then taking snapshot

Icons path altered in built editor

I've made a couple plugins for ckeditor and added icons for them. These icons show up when I embed the unbuilt code on a test page, but, when I build the editor, the minimized code thinks the icons at 'original/path/to/the/icon.png?t=D5AK' instead of 'original/path/to/the/icon.png'. This error does not occur when I copy an icon from another plugin in the src code. At the moment the only way I am adding the icon is through "icon: this.path + 'icons/icon.png'," in plugin.js. Is there somewhere I need to add a reference to the icon?
This is an intentional addition to resources' paths. It ensures that every two CKEditor releases have different paths to the same resource what disables cache. And this works perfectly unless you're trying to load CKEditor from local file system than from a web server.

Use ApplicationBar Icons from other assemblies?

I have a Page in a Windows Phone class library. This page has an appbar. I would prefer everything this page needs to be included within the class library so the setup list for consumers of this page / assembly is minimal.
However, When I set ApplicationBar icons, they get added to the class library project under the folder 'icons' just like normal, they show up fine in Blend, but at runtime they are no where to be found!
When I put the icons in the Windows Phone Application project all is well. However this is not my desired scenario as it is additional configuration / setup by the application author to use my pages.
I tried using the resource pathing using /{AssemblyName};component/icons/{IconName} but of course the AppBar needs them to be of type "Content" not "Resource". So I am thinking this is impossible but I wanted to know if anybody out there figured out how to do this.
Sorry guys. I just figured it out. I changed the newly added icons from "Resource" to "Content" but I forgot to set "Copy if newer" so they weren't getting outputted to the Bin\Debug\icons folder of the windows Phone Application. something to keep an eye on I guess.

Visual Studio 2008 Web Project problem with PNG files

I've added a PNG file to a directory in my VS2k8 webforms project, and when I run the app, it refuses to render my image - it even knows the dimensions but renders a box with a red X.
Oddly enough, if I double click the PNG file within VS2k8, it opens up in the IDE and displays fine (but only within the IDE).
Does anyone have any clues?
The path is correct.. I just have a basic default.aspx page with this in the body
<img src="img/logo.png" />
if i navigate to img/logo.png in the browser, it shows a box with the same dimensions as my image, but a red x. Its finding the image, just not rendering it. It's showing up in IE running under the vs2k8 web server (localhost:5512/default.aspx)
I've dropped a JPG in the same directory, and it shows up just fine.
I'm not sure what type of PNG it is, but here is the kicker.... If i make an HTML file that references that image, copy both this HTML file and PNG file to my webserver (or just double click on the HTML page), it comes up JUST FINE.
Its leading me to believe that the Visual Studio web server may not recognize PNG files (at least this one) properly?
Try changing the path to:
<img src="/img/logo.png" />
Try to use Firebug on the running page. It will let you change the path dynamically so that you can see if there is a problem with the path. Alternatively you can also just copy your dev path, say "http://localhost:<someport>/img/logo.png" and see whether it loads there.
As a third alternative you could use the <asp:Image id="imageLoge" runat="server" ImageUrl="..."/>. The advantage is that it will let you browse in the folders and select your image. In this way you're guaranteed that it is not a problem with your path.

Resources