Embedded images not showing when in a UserControl

问题:

I have an Image control that contains a path to an embedded image (build action 'resource').

<Image Source="Assets/images/image.png" Stretch="None" />

If I add that to a container in my MainPage.xaml the image appears fine. When having the same image in a UserControl as shown below, and then adding an instance of that UserControl on MainPage.xaml the image does not appear.

<UserControl x:Class="HomePage.Views.SimpleUserContol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid x:Name="LayoutRoot" >
        <Image Source="Assets/images/image.png" Stretch="None" />
    </Grid>
</UserControl>

Can anyone shed any light on why this happening and maybe point me in the direction of a solution.

Cheers, J

(I'm working in Silverlight but would think the same thing probably happens in WPF)

EDIT:

Setting

<Image Source="/Assets/images/image.png" Stretch="None" />

works fine when setting the build action to 'Content' however it doesn't work when using 'resource'. The problem is definatly it's relative position in the file structure as add ../ works fine. I'd still like a solution to get an image from the assembly if possible

回答1:

You have to reference it as a resource, not just the path. This is how it is done in a WPF application:

<Image Source="/MyAppName;component/images/image.png" Stretch="None" />

The original image is located in images/image.png

Note:
I have no experience in SilverLight, but you said it is probably similiar in WPF, so I suggest this...

回答2:

You're using a relative path to the image. If your UserControl is located in a subdirectory, the relative path is not valid anymore. You should use an absolute path like "/Assets/images/image.png", or "pack://application:,,,/Assets/images/image.png" (use this last version if your UserControl is going to be used by another assembly)

回答3:

If you needed to change its build type from Content to Resource, try building clean. I had everything exactly right (path to other project's resources, build type, et al.) yet it didn't work until I added a new image to the images folder, which perhaps cleared out the old statuses.

In fact, manually delete the bin and obj folders in the project where the image is.

回答4:

I think the problem is related to the "virtual" namespace your image got when it's embedded in ressources (from the logical path to it) and the difference with your usercontrol namespace.

回答5:

using a '/' to get to the root of the site works only if the root of the site is not within a subdirectory. ie: an admin site as a subdirectory to the main site (http://www.somesite.com/admin). In this case using '/assets/images/image.png' would then go to the parent site first. You may be able to reference the image like so: '~/assets/images/image.png'

回答6:

I've also found the when an image has special characters that require encoding in the file name, like "+", which gets encoded %2b can cause the problem as well.

I suggest renaming any images that might have contain escape characters.

回答7:

I had this problem and I tried moving the image in and out of the Canvas, and up and down the Canvas container. I even tried manipulating the panel.zindexes to no avail. I was using source= "/images/map.jpg". The image folder was created by right clicking the project and adding folder, so it was below the resources folder. Solved: I navigated to the images folder in windows explorer and used alt+d, and ctrl+c to copy the file location with these \ instead of these / and voila it worked.