Image shows up in Visual Studio designer but not during run-time

Question

I'm currently working w/ VS studio 2010, .NET 4.0. Here is my scenario:

I currently have a class library project called "Images" that contains a sub folder called "Icons". All my icons currently live in this project and are accessed by multiple projects via siteoforigin. Everything shows up fine while in the designer, but during run time the images do not display.

Here is my folder structure:

• Root Folder
  • Images
    • Icons
  • Project 1
  • Project 2
  • Project 3

All projects are referencing the Images class lib. proj, and all icons inside the "icons" sub-folder within the "Images" project is set to: "Build Action = Resource".

The xaml looks like this (which is perfectly visible during design time):

     <Button Name="Button1" Click="Button1_Click">
        <Button.Content>
            <Image Source="pack://siteoforigin:,,,/Data.Images;component/Icons/Button1.png" />
        </Button.Content>
    </Button>

Answer 1

siteoforigin is for files copied to the executable directory or subdirectories, for resources you should use application as authority as far as i know.

SiteOfOrigin:

Path: The name of the site of origin file, including its path relative to the location from which the executable assembly was launched.

Answer 2

This was driving me crazy. I tried lots of different things based on various articles but nothing worked. My xaml window and image are in a separate DLL from the executable assembly. Not sure if that was part of my problem.

In the end I had success with:

1. Make sure the image properties in the project has "Build Action" = "Resource", NOT "Embedded Resource"
2. In the xaml, with the image tag selected, use the properties windows to select the Source dropdown since NOW the image appears in the dropdown list! This let visual studio format the string for me.

The string visual studio formatted for my image was:

<Image Source="/Paperless.Common;component/Resources/Checkbook.png" />

where "Paperless.Common" was the name of my assembly, and "Checkbook.png" was my image that resided in a "Resources" folder.

Answer 3

Maybe the Image does not have the Build Action set to Resource. If it's anything else, including Embedded Resource, then it will not display properly at runtime.

Answer 4

Well, I waisted more than 3 hours of my time on this problem. Your answers helped me to partially solve the problem and that's what urged me to add to this useful discussion.

I got my problem solved as:

1. select all images in your solution explorer resources.
2. Right click and go to properties.
3. Build action to "Embedded Resource"
4. Copy to Output to "Copy Always"
5. save and build solution.
6. add image and take care or the ZIndex value.

7. After all of that I found my self when I use the image multiple times or try to change to another image on the same image control to change the path for the image either on XAML or in the image control properties to be:

   source="pack:://siteoforigin:,,,/Resources/image.png"
   

Answer 5

I came here to get my design time image data to show up (inverse problem).

ImagePath="pack://application:,,,/MyApplicationName;component/Images/Icons/Button1.png" is what did the trick, in addition to Build Action set to Resource and Copy to Output Directory set to Copy if newer.

Answer 6

The following worked for me:

• Build Action = Resource

• Copy to Output Directory = Do not copy

xaml:

<Image Source=“Rsources/myPic.png”/>

Where “myPic.png” is the image inside “Resources” folder

Answer 7

To anyone who may not try this first, if you attempt some of the fixes mentioned here, and nothing is working, try cleaning and rebuilding your solution. I just forgot to add the images to the project (Create images folder, right click folder -> add existing -> click on image).

That didn't fix it until I did a clean and rebuild.

Answer 8

My image is not in the same project as my window

I solve the problem going to Solution Explorer > "Project name" > Resources then select the image and change Build Action to Resource.

Answer 9

I came across a similar problem. I was using the following format initially (under a class library project).

<Image Source="pack://siteoforigin:,,,/Images/Toolbars/Legend.png"/>

However, when I would Clean/Build or Rebuild the solution or restart the Visual Studio, the button image would disappear, even though I would see them on XAML designer.

I came up with a weird solution but it worked for me. With this solution the images always remain in tact during runtime and on the XAML at design time, -After solution is rebuild -After solution is cleaned and build -After the Visual Studio is closed and restarted.

This solution requires to have 2 folders (I called Resources) with same image names, both under the Main Application and the class library project. Under the project

<Image Source="pack://application:,,,/Resources/Legend.png"/> 

For the images set BuildAction = Resource & Copy to OutputDirectory = Do not copy in both places.

If I use only the Resource Folder at the main application, it still works but this time the XAML design time Parser cannot see the image. That is why I have duplicated the same folder at the class library (where the XAML UserControl is located).

The reason for this complication may be XAML Parser inner workings. The Design Time portion of it looks always at folder location under the project where the UserControl is located, while the runtime portion of it requires the images to be in the main application to run properly.

I am not claiming that this is the proper solution or a reasonable solution at all, but it worked in my case. Comments for an improved or better solution is welcomed.

UPDATE: After trial and error + some other clues (https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/aa970069(v=vs.100)), I came up with a simpler solution and it works (for me)

At Resources declare:

<BitmapImage x:Key="mLegend" UriSource="pack://siteoforigin:,,,/Images/Toolbars/Legend/Legend.png"/>

under Button declare:

<Image Source="{StaticResource mLegend}"/>

set BuildAction = Content & Copy to OutputDirectory = Copy if new

As final step, Clean and Build solution.

Answer 10

The easiest way is to just add the image to your project. Add a Resource folder to your project by right clicking on solution explorer -> Add -> Folder (Name it Resource) -> Right click the newly created Resource folder -> Click Add existing Item -> Find your image (select All Files)

Add an image item to your xaml form selected. Under properties -> Common -> Source you should be able to just drop down and select your image

Selecting from dropdown

Answer 11

You can simply use relative paths also:

<Button Name="Button1" Click="Button1_Click">
    <Button.Content>
        <Image Source="Icons/Button1.png" />
    </Button.Content>
</Button>

Answer 12

It could be as simple as what I just did earlier today. I placed the file in the folder without referencing it in the solution. It showed up fine during design.

Answer 13

If you are using images from DLL, make sure that dll project has default resources file setup in Project's properties. and change its access modifier to public. Also, set images build action to "Resource"

Answer 14

Please check image is included in solution or not. If image is not included then click on Show All Files from solution and then right click on image and select Include In Project option. After that it will work with relative path as well.

Ex:

" Source="/Images/Logo/close.png" "

Answer 15

I had same problem.
Now its working...
Try this:

<Button x:Name="b2" HorizontalAlignment="Left" VerticalAlignment="Top"
    Width="26" Height="29"> 
    <Button.Background> 
        <ImageBrush ImageSource=" a.png"/> 
    </Button.Background>
</Button>

Answer 16

Maybe this helps someone with Visual Studio 2019. I was missing a simple /

Steps: Right Click Project -- Add > Existing Item -- Select Picture to add -- Click on picture in visual Studio -- go to properties -- change Build Action to > Recources

no we go into Xaml and add your resource

<UserControl.Resources> <Image x:Key="ButtonImage" Source="/image.jpg"/> </UserControl.Resources>

the / before the image name is a must. Without the / it will show up as working in xaml but once you start the program it wont show.

<Button Content="{StaticResource ButtonImage}"></Button>

I hope that fixes it if you read this

Answer 17

1. Just Drag & Drop folder "Icons" into your project "Images".
2. Use relative path: Image Source="Icons/Button1.png".

Answer 18

All very good answers. I didn't see this one above and though it's simple and obvious, it will certainly cause the symptoms of the original post. It's easy to forget when we're in a hurry.

Make sure if you dragged and dropped the images into the project that the files have been "Included in Project". That's quickly available from the context menu.

Answer 19

1- change the file image properties into resource , {click right on the image file-> choose Properties -> switch Build Action to Resource.

2- use this tag to display image

 <Image Source="pack://application:,,,/[Put here the Main Namespace];component/[File path]"/>

example

<Image Source="pack://application:,,,/My;component/Resources/switch-off.png"/>

Answer 20

In my case, I just had to follow two steps (Properties Windows):
1) Changing Build Action (all the resource files) to "Resource";
2) Choosing (again) the desired image in the Source field.

Answer 21

In UWP, there is no "Resource" selection for Build Action, but selecting "Content" works, and is what other *.png files came in as. The one that wasn't working for me came in as "EmbeddedResource" for some reason. Thanks for the suggestions.

Answer 22

Including assembly name works Build action=> resource copy to the output directory => copy if newer

   System.Windows.Controls.Image mini = new System.Windows.Controls.Image();
                            mini.Source = new BitmapImage(new Uri(@"pack://application:,,,/Cloudnynpos;component/Imageresources/tbl2.png"));
                            btnnew.Content = mini;

Answer 23

Goto SolutionExplorer-->Find Your Images Folder-->Right Click your image and Goto Properties. Change the Build Action None to Resource...Image Property Change