When developing HTML5 apps in Visual Studio 11, how do you make a picture link to a local file?

Question

Apparently Visual Studio doesn't allow it.  Is there a workaround?

Answer 1

File thumbnails sample
http://code.msdn.microsoft.com/windowsapps/File-thumbnails-sample-17575959

Step in the right direction I think.

Answer 2

File thumbnails sample
http://code.msdn.microsoft.com/windowsapps/File-thumbnails-sample-17575959

Step in the right direction I think.

Not enough though, especially since all I'm tying to use is HTML, not JavaScript.  (Not to be rude.)

Answer 3

Hey M,

Do you mean an arbitrary file on disk or a file included as part of your application?

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

I think an appendum to his question will be, if you have access to some sort of a Silverlight-like Isolated Storage, where it pulls from the My Documents folder. For security reasons I'm sure his "local file" would have to be in some sort of systems folder like My Documents(e.g. not an image in C:/temp/). I remember seeing BUILD videos on making an image gallery using pictures that come from My Pictures.

Answer 5

A file included as part of my application, I guess.  You see, essentially the code I'm trying to make work is this:

<a href="D:\Users\MASTER260\My Documents\Visual Studio 11\Project ITABG\Project ITABG\Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.html" target="_blank"><img src=http://i41.tinypic.com/5f2o07.jpg border="0"></a>

The application itself is here: D:\Users\MASTER260\My Documents\Visual Studio 11\Project ITABG\Project ITABG\

...Yes, you read that right, I'm essentially trying to pull the default.html of another application whose folder is within the folder of the app I'm using... yes, I know it's weird...

Answer 6

No, it is not weird.  You will see that is how we include script files and HTML files in our app templates that get generated for you.  Your file simply needs to be included in your application.  Then specify the relative path to it in your HTML.  The application packages the resources you include when it is built and deployed.  In your specific example you would create these folders in your project: Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\ and then Right mouse click on that deapest folder and chose "add existing".  Select you HTML file.  Then change your src= attribute to be that relative path: Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.html

---

Jeff Sanders (MSFT)

Answer 7

Thanks, I'll try it!
EDIT: I can't make a folder in my project called, "Rest of ITABG" because it says the name conflicts with an exisiting file.

Answer 8

The fastest was to fix this is to rename or temporarily remove the existing folder, then put the contents back in the newly created one.

---

Jeff Sanders (MSFT)

Answer 9

Which of the folders are we talking about here?  (Sorry if I sound like an idiot.)

Answer 10

No you are not an idiot!

When you tried to create this folder in your project: "Rest of ITABG" you got an error because that folder already exists.  The fix would be to make sure that folder does not exist in you project.

D:\Users\MASTER260\My Documents\Visual Studio 11\Project ITABG\Project ITABG\Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\

You can work around this by renaming Rest of ITABG using Windows Explorer to OLD Rest of ITABG.

Then in Visual Studio create these folders in your project: Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\

Finally using Windows Explorer you can copy the contents of OLD Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\ back in to their respective folders.

Now you can right mouse click on that deapest folder and chose "add existing".  Select you HTML file.  Then change your src= attribute to be that relative path: Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.html

-Jeff

---

Jeff Sanders (MSFT)

Answer 11

Thanks!  Anyways, I tried what you said, & I was able to add all those folders to the project, only it was still not working.  Apparently I noticed Visual Studio was saying I was missing the alt attribute, & I added that, but it still didn't work...

Thanks,

M260

Answer 12

You will then need to add the path to your file like this:

src="ms-wwa:///Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.html"

(or whatever the relative path to the file is

---

Jeff Sanders (MSFT)

Answer 13

You will then need to add the path to your file like this:

src="ms-wwa:///Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.html"

(or whatever the relative path to the file is

---

Jeff Sanders (MSFT)

Still doesn't work. Is it possible I'm putting it in the wrong place?  I've tried it in different areas, with & without less than or equal to signs...

Answer 14

Let's start with the basics and troubleshoot this from the ground up.  Is the image displaying at all?

Take these steps:

Create a brand new blank basic wwa application using Visual Studio.

Create a folder called html in your project.

Right click on the html folder in the solution view and choose 'Add', 'Existing item...'

Then navigate to the html you want to use.  This should add it to the html directory in your project.

Now add this (using your filename) to your default.htm (note that ms-wwa:// is optional and /html/default.htm should work):

<a href="/html/default.htm">Click me</a>

Run your application, does this page display when you click on the tag?  If not it is a problem with your

html page. 

If it does work:

Now create these folders in your solution using the above steps:

Copy your htm file into the path and test again.  I was able to create a simple HTML document and do this.

    <a href="\Rest of ITABG\ITABG 1\ITABG 1\ITABG 1\default.htm">Click me</a>
    <a href="ms-wwa:///Rest of ITABG/ITABG 1/ITABG 1/ITABG 1/default.htm">Click me</a>

If you do have problems, enable the Javascript console window when debugging (debug, windows...)

-Jeff

---

Jeff Sanders (MSFT)