CODEWITHSUNDEEP
c#wpfimagevisual-studio
EthanBar
EthanBar

Reputation: 705

Image not displaying at runtime C# WPF

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"

Upvotes: 32

Views: 72514

Answers (15)

Anonymous
Anonymous

Reputation: 7

Still an issue in 2024. What finally worked for me with .NET 4.8 and 6.0 ...

  1. Add image to project.
  2. Properties\Build Action -> Resource.
  3. XAML -> Source="/<AssemblyName>;component/Resources/<Image>"

Especially note that the AssemblyName must be used (NOT NAMESPACE!). If problems persist, add the following in the code-behind when the window is visible.

var uri = new Uri("/Resources/<Image>", UriKind.Relative);
Image.Source = new System.Windows.Media.Imaging.BitmapImage(uri);

Cheers

Upvotes: 0

Nathaniel Alvarez
Nathaniel Alvarez

Reputation: 1

I'm using the latest version of .net 8 this one works for me

  1. Create a folder name image and put there the image file
  2. Right click on the png/jpg file and go on properties
  3. Set the build action to Content and Copy to Output Directory to Copy Always.

Upvotes: 0

Marc Miller
Marc Miller

Reputation: 165

In my case, the problem was that I was trying to include a .svg file, which apparently isn't supported by default. By only changing from a svg file to jpg file with everything else staying the same, my image suddenly appeared.

Upvotes: 0

Wizr
Wizr

Reputation: 165

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>

Upvotes: 0

Anonymous
Anonymous

Reputation: 1

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.

Upvotes: 0

UJK
UJK

Reputation: 97

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

Upvotes: 2

Hailey
Hailey

Reputation: 1

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

Upvotes: 0

swapnil
swapnil

Reputation: 1192

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.

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

Upvotes: 96

Paul Wichtendahl
Paul Wichtendahl

Reputation: 127

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

  1. Go to Project->Properties->Resources
  2. Select File (drop down with choices of strings, images, icons...)
  3. Click Add Resource->Existing File
  4. Navigate to the image and import it
  5. VS identifies it as an image (mine is PNG) and switches the view to show Image resources
  6. Select the thumbnail of the image and in the Properties of the Image (type should be Bitmap) set Persistence to Embedded in resx
  7. I saved and closed Project Properties as I got confused here before
  8. Go to the Resources folder under the project and select the image (it should be listed for you)
  9. Select the image and set the BuildAction to Embedded Resource
  10. 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.

Upvotes: 0

Rodrigo Balibrera
Rodrigo Balibrera

Reputation: 179

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

Upvotes: 0

RoadRoller01
RoadRoller01

Reputation: 21

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

Upvotes: 1

Tyler Pantuso
Tyler Pantuso

Reputation: 853

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

Upvotes: 1

Scott Madeux
Scott Madeux

Reputation: 419

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.

Upvotes: 21

Christoffer Eriksson
Christoffer Eriksson

Reputation: 181

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.

Upvotes: 13

Harjeet Singh
Harjeet Singh

Reputation: 396

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

Upvotes: 2

Related Questions