WPF - Import image as resource

In WinForms it is possible to import an image as a resource, and the image would still work when compiled in the /bin/Debug folder.

I can't figure out how to get this working in WPF, when I run the application the image doesn't load, because the image is saved in /Projects/AppName/images/, and the application is compiled into /Projects/AppName/bin/Debug when I run it in Debug mode.

Do I simply need to make a copy of my Images folder and put it where the application is compiled? Or is there another way. Here is my code which displays my image:

<Image Width="300">
    <Image.Source>
        <BitmapImage DecodePixelWidth="300" UriSource="/images/jamsnaps-dark.png" />
    </Image.Source>
</Image>

Solution 1:

  • Create a folder (e.g. images) in your Visual Studio Project.
  • Add the image file(s) to that folder.
  • Set their Build Action to Resource (in the Properties window, see second image in this answer).

Then write the UriSource property like you already did:

UriSource="/images/jamsnaps-dark.png"

That URI is effectively a Resource File Pack URI, where the prefix is automatically added by WPF.

Solution 2:

Two options :

1) Go out from bin/Debug and in to your application folder by ../../ and then to your image.

  <Image>
      <Image.Source>
           <BitmapImage  UriSource="../../images/jamsnaps-dark.png" />
      </Image.Source>
   </Image>

2) Compile your images as Content from properties in the context menu on the image file , and then when compiled they would be placed in been debug. I don't remember if you also need to tell them to copy local also in properties ( i'm not near a computer at the moment so i can't check .

Solution 3:

  1. Add the image to your project directory
  2. In the solutions explorer, right click the image and select Include in Project

Build Action should be set to Resource by default.

You can then start to use the image path relative to the root e.g. images/text.jpg if you put it in a folder called images.