'Image not displaying at runtime C# WPF

I have been trying to learn C# but I'm coming across a lot of problems. 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"

Thanks for your help!

c++sharpwpfimagevisual-studio


Solution 1:[1]

In your project:

  1. Create a folder say "img", right click on it and select add existing item add image to folder
  2. Go to properties of the added image, set Build Action as Resource and Copy To Output Directory as Copy if newer.

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"/>

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[4]

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"/>

Solution 5:[5]

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

Solution 6:[6]

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

  1. 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

  1. 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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eliahu Aaron
Solution 2 Christoffer Eriksson
Solution 3 Scott Madeux
Solution 4 Harjeet Singh
Solution 5 Tyler Pantuso
Solution 6 RoadRoller01

Related Questions