Image not displaying at runtime C# WPF

Question

I am trying to display an image in WPF but for some reason, the image won't show! It appears on the Visual Studio editor but when I run the application it doesn't appear.

Here is some of my code:

This is how I'm trying to display the image:

<Image HorizontalAlignment="Left" Height="100" Margin="273,147,0,0" 
       VerticalAlignment="Top" Width="100" Source="image.jpg"/>

I have also tried using this:

Source="pack://application:,,,/image.jpg"

Have you tried searching SO? A quick search which may be of help reveals : http://stackoverflow.com/questions/11880946/how-to-load-image-to-wpf-in-runtime and http://stackoverflow.com/questions/15636047/image-in-wpf-button-not-visible-at-runtime — JARRRRG, Jun 05 '14 at 00:31
The trick is to add the image file to your Visual Studio project and set its Build Action to Resource (which it should be by default). — Clemens, Jun 05 '14 at 05:17

score 86 · Accepted Answer · edited Jan 16 '23 at 17:33

86

In your project:

Create a folder say "img", right click on it and select add existing item add image to folder
Go to properties of the added image, set Build Action as Resource.

It worked for me.

In XAML

<Image HorizontalAlignment="Left"  Name="MyImg" Height="80" Margin="273,147,0,0" 
    VerticalAlignment="Top" Width="100" Source="/img/Desert.jpg"/>

edited Jan 16 '23 at 17:33

Clemens

123,504
12
155
268

answered Jun 05 '14 at 07:24

swapnil

1,092
7
16

4

I had to set the Build Action to `Embedded Resource` – intrixius Mar 15 '19 at 10:51
1

I had to do several builds and rebuilds also cleaned up the `bin` and `obj` folder and finally checked the option "Copy always" for "Output Directory" to make it work eventually. And I can say the Image `Name`, `Width`, `Height`, etc. are not playing a role for displaying the image. What is essential here is to make the VS finally build the correct version with the image embedded in the executable. – Arsen Khachaturyan Mar 17 '20 at 15:39
For that Path you do not need to set to Resource, Content is enough. If you set it to Resource and 'Copy to output directory' true it will be compiled into the assembly and additionally copied to the output directory - so effectively shipped twice. – dsdel Jul 24 '20 at 06:53
2

I also had to Build -> Clean Solution, Build Solution to make it work. – Upulie Han Aug 11 '20 at 06:01
Seems that someone at M$ still hasn't gotten the 'memo' - you MUST CLEAN and then RE-BUILD for the changes to take effect. Seems curiously odd, but this is what works. – Redgum Mar 04 '22 at 00:17

score 16 · Answer 2 · answered Jul 14 '21 at 09:41

16

If none of these work, try changing the Build Action to Content.

That's what worked for me after struggling for a long time with this.

answered Jul 14 '21 at 09:41

Scott Madeux

329
3
8

1

Thanks. Tried `Resource` and `Embedded Resource` as suggested here and `Content` is the one that worked for me with .NET 6. – UchiTesting Mar 17 '22 at 16:40
1

Content also works in VS 2022 with .NET 6. – Mike Upjohn Mar 17 '22 at 21:13
@MikeUpjohn Same for me. VS2022, tried most options and Content is the way to go. Maybe one time I will actually read up on what they mean :-)) – Xan-Kun Clark-Davis Apr 16 '22 at 20:27

score 11 · Answer 3 · answered Mar 28 '18 at 05:58

11

Go to the properties for the image in Visual Studio and change "Build Action" to "Resource" and "Copy to Output Directory" to "Copy if newer".

I had to do a rebuild, but then it worked. Cred to swapnil.

answered Mar 28 '18 at 05:58

Christoffer Eriksson

151
1
7

score 2 · Answer 4 · answered Jun 05 '14 at 06:10

2

please drag the image to a image source,it will be like this /img/image.jpg"/

<Image HorizontalAlignment="Left" Height="100" Margin="273,147,0,0" 
       VerticalAlignment="Top" Width="100" Source="/img/image.jpg"/>

answered Jun 05 '14 at 06:10

Harjeet Singh

388
2
6
22

3

i did this bt it didn't work. syntax is correct but you nedd to change image properties. – swapnil Jun 05 '14 at 07:21

score 1 · Answer 5 · answered Apr 29 '22 at 02:45

1

If none of the above works, try Rebuilding your application from the build menu. Not "Build", but "Rebuild"

answered Apr 29 '22 at 02:45

Tyler Pantuso

835
8
16

score 1 · Answer 6 · answered May 28 '22 at 00:29

For example, this is your project structure

+ProjectName
+--+imagesFolder
|  +--amogus.png
|
+--App.xaml
+--MainWindow.xaml
+--etc.

and you want to access the to amogus.png in your xaml window, You have two ways:

note this way the imagesFolder will be visible in the release build to users

to set amogus.png Build Action to Content and Copy to Output Directory to Copy always more info, then rebuild from the build menu, then add this to the window xaml

    <Image Source="pack://siteoforigin:,,/imagesFolder/amogus.png" ></Image>

note this way the imagesFolder will be not visible in the release build to users

to set amogus.png Build Action to Resource and Copy to Output Directory to Do not copy or blank more info, then rebuild from the build menu, then add this to the window xaml

    <Image Source="/imagesFolder/amogus.png" ></Image>

more detail

score 1 · Answer 7 · answered Apr 27 '23 at 07:19

Right click your project name in solution explorer and select Add -> New Folder.
Name this folder as Images
Right click to Images folder and select Add -> Existing item and then select your image.png file
On your image.png properties adjust build action -> Resource
Now your image source is Source="Images/image.jpg"
You should see your image on design window of VS. Do not forget to clean code before compiling

score 0 · Answer 8 · answered Aug 31 '22 at 08:16

0

Right click images on the Solution Explorer, choose Properties and then set the Build Action as Resource.

answered Aug 31 '22 at 08:16

Rodrigo Balibrera

161
1
4

score 0 · Answer 9 · answered Sep 08 '22 at 22:57

Did not have to do a clean and rebuild. I tried every combination listed above (I am in VS2017)

Go to Project->Properties->Resources
Select File (drop down with choices of strings, images, icons...)
Click Add Resource->Existing File
Navigate to the image and import it
VS identifies it as an image (mine is PNG) and switches the view to show Image resources
Select the thumbnail of the image and in the Properties of the Image (type should be Bitmap) set Persistence to Embedded in resx
I saved and closed Project Properties as I got confused here before
Go to the Resources folder under the project and select the image (it should be listed for you)
Select the image and set the BuildAction to Embedded Resource
I set the File Action to Copy if Newer

From here I move back and forth between Debug and runtime, various combinations of clean, build and publish and the image has FINALLY been displayed every time.

Last tidbit, the XAML in the dialog looks like this:

<Image Source="pack://siteoforigin:,,,/Resources/DeathSpiral.png" />

I have updated several projects that were supposed to display graphics but didn't always do so using the steps above. They all work now. Tested in both VS2017 and VS2019 and no errors so far.

score 0 · Answer 10 · answered Apr 12 '23 at 15:29

I ended up solving this by using relative pathing in XAML:

<Image Source="../../Assets/QuickSettingsScreenImage.png"/>

And in the csproj file creating an ItemGroup, and setting the images as Resource

<ItemGroup>
    <Resource Include="Assets\QuickSettingsScreenImage.png" />
</ItemGroup>

After making the changes, I had to use the Rebuild Project button to get the image showing up correctly.
As a note, I am on dotnet 6

Anonymous · Answer 11 · 2023-05-28T18:27:44.160

0

Copy the image into the project and set its Properties\Build Action to Resource (Do not copy). Use this for the xaml part.

<Image Source="/<asm_name>;component/<image prj_path>"/>

<!-- this also works -->
<Image Source="/<image prj_path>"/>

If using the former, refer to the project's Properties\Application tab to get the assembly's exact name.

edited May 28 '23 at 18:27

answered May 20 '23 at 15:50

Anonymous

1
1

score 0 · Answer 12 · answered Sep 02 '23 at 08:57

0

for those who didn't get it to work after trying all these answers, I found this in my .csproj file and just remove it, it works!!

  <ItemGroup>
    <None Remove="Resources\img1.png" />
  </ItemGroup>

answered Sep 02 '23 at 08:57

Wizr

151
7

Image not displaying at runtime C# WPF

12 Answers12

Linked

Related