图像显示在 Visual Studio 设计器中，但不在运行时

Posted 2023-03-15

【中文标题】图像显示在 Visual Studio 设计器中，但不在运行时

【英文标题】：Image shows up in Visual Studio designer but not during run-time

【发布时间】：2012-01-18 23:01:58

【问题描述】：

我目前正在使用 VS Studio 2010，.NET 4.0。这是我的场景：

我目前有一个名为“Images”的类库项目，其中包含一个名为“Icons”的子文件夹。我所有的图标目前都存在于这个项目中，并且可以通过 siteoforigin 被多个项目访问。在设计器中一切正常，但在运行时图像不显示。

这是我的文件夹结构：

根文件夹 图像 图标 项目 1 项目 2 项目 3

所有项目都引用图像类库。 proj，并且“Images”项目中“icons”子文件夹中的所有图标都设置为：“Build Action = Resource”。

xaml 看起来像这样（在设计时完全可见）：

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

【问题讨论】：

Tangent：在这种情况下，... 标签不是多余的吗？ ... 标签内的任何对象都被假定为 Content.

【参考方案1】：

这让我发疯了。我根据各种文章尝试了很多不同的东西，但没有任何效果。我的 xaml 窗口和图像位于与可执行程序集不同的 DLL 中。不确定这是否是我的问题的一部分。

最后我成功了：

确保项目中的图像属性具有“Build Action”=“Resource”，而不是“Embedded Resource” 在 xaml 中，选择图像标签后，使用属性窗口选择源下拉列表，因为现在图像出现在下拉列表中！这让 Visual Studio 可以为我格式化字符串。

为我的图像格式化的字符串是：

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

其中“Paperless.Common”是我的程序集的名称，“Checkbook.png”是我位于“Resources”文件夹中的图像。

---

为完整起见，上述 URI 为 Resource File Pack URI，其中 URI 前缀部分由 XAML 解析器自动添加。

完整的 URI - 您必须在后面的代码中使用 - 具有 pack://application: 前缀，并且也适用于 XAML：

Source="pack://application:,,,/Paperless.Common;component/Resources/Checkbook.png"

【讨论】：

从属性源下拉列表中选择图像是可行的方法。

通过在此处执行 Markb 给出的 #2 将处理您的文件夹结构。但是，有时它需要工作到 #3 请清理并重建您的项目。

@JakeGeers 我真的认为你应该发表你的评论作为答案，这是有效的。如果你这样做，请告诉我，以便我投票。谢谢。

从源下拉列表中选择图像，将我的 logo.png 更改为 /logo.png 现在它可以工作了。谢谢

有趣的是，在我的情况下，这种方法（有效）导致了 Source=".​​.." 裸文件名的值。没有路径或其他装饰。无论如何，耶！

【参考方案2】：

也许图像没有将构建操作设置为资源。如果是其他任何东西，包括嵌入式资源，那么它在运行时将无法正常显示。

【讨论】：

这应该是关于这个主题的任何答案的一部分！谢谢。

这完全做到了。奇怪的 Microsoft 工作流程需要 300 个步骤才能将怪异的图像添加到项目中。

【参考方案3】：

siteoforigin 用于复制到可执行目录或子目录的文件，据我所知，对于资源，您应该使用application 作为权限。

SiteOfOrigin:

路径：源文件站点的名称，包括其相对于启动可执行程序集的位置的路径。

【讨论】：

我将图像源更改为： 并保留了构建操作图像作为“资源”，它仍然得到相同的结果。我还尝试将图像源更改为： 并得到相同的结果。参考项目是否必须是类库。和它有什么关系吗？

我不知道，你看过我链接的参考页面吗？那里没有关于任何此类限制的信息吗？

我也有同样的问题。但是给定的参考页面现在不存在。请帮帮我。

@HiddenFisher：这些错误只是意味着该主题不适用于最新版本的 .NET。如果单击“其他版本”，则可以访问 .NET 4，这通常完全适用于以后的版本。

【参考方案4】：

嗯，我在这个问题上花费了 3 个多小时。 您的回答帮助我部分解决了问题，这正是促使我加入这个有用讨论的原因。

我的问题解决了：

选择解决方案资源管理器资源中的所有图像。 右键单击并转到属性。 为“资源”构建操作

毕竟，当我多次使用图像或尝试更改为同一图像控件上的另一个图像以将 XAML 或图像控件属性中的图像路径更改为：

Source="pack:://application:,,,/Resources/image.png"

【讨论】：

我尝试了这里和其他地方提到的一切，但无济于事。图像在设计模式下很好，但在调试时，它们都坏了。 “清理和重建”实际上让情况更糟，因为我的应用程序再也找不到带有我的样式的 ResourceDictionary 文件！在玩了 2 个小时以上之后，我将构建从 Debug 更改为 Release。神奇的是，一切都很完美。然后我将它从 Release 改回 Debug。神奇的是，一切仍然完美运行。仅使用 WPF...

编辑此内容以将错误的Embedded Resource 构建操作更改为Resource，并将pack://siteoforigin 更改为正确的pack://application URI 前缀。程序集资源文件不需要复制到输出文件夹。

【参考方案5】：

我来这里是为了显示我的设计时图像数据（逆问题）。

ImagePath="pack://application:,,,/MyApplicationName;component/Images/Icons/Button1.png" 的诀窍在于，除了将Build Action 设置为Resource 和Copy to Output Directory 设置为Copy if newer。

【参考方案6】：

以下内容对我有用：

• 构建操作 = 资源

• 复制到输出目录 = 不复制

xaml:

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

其中“myPic.png”是“Resources”文件夹中的图片

【讨论】：

这是对我有用的组合！谢谢！

【参考方案7】：

对于可能没有先尝试此操作的任何人，如果您尝试了此处提到的某些修复，但没有任何效果，请尝试清理并重建您的解决方案。我只是忘了将图像添加到项目中（创建图像文件夹，右键单击文件夹 -> 添加现有 -> 单击图像）。

在我进行清理和重建之前，它并没有解决。

【讨论】：

对细节的关注加 1。

【参考方案8】：

我的图片和我的窗口不在同一个项目中

我通过解决方案资源管理器 > “项目名称” > 资源解决问题，然后选择图像并将 Build Action 更改为 Resource。

【参考方案9】：

我遇到了类似的问题。我最初使用的是以下格式（在类库项目下）。

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

但是，当我清理/构建或重新构建解决方案或重新启动 Visual Studio 时，按钮图像会消失，即使我会在 XAML 设计器上看到它们。

我想出了一个奇怪的解决方案，但它对我有用。 使用此解决方案，图像在运行时和设计时始终保持在 XAML 上， - 解决方案重建后 - 清洁和构建溶液后 - Visual Studio 关闭并重新启动后。

此解决方案需要在主应用程序和类库项目下有 2 个具有相同图像名称的文件夹（我称为资源）。项目下

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

对于图像设置 BuildAction = Resource & Copy to OutputDirectory = 不要在两个地方复制。

如果我只在主应用程序中使用资源文件夹，它仍然可以工作，但这次 XAML 设计时解析器看不到图像。这就是为什么我在类库（XAML UserControl 所在的位置）中复制了相同的文件夹。

这种复杂的原因可能是 XAML Parser 内部工作。它的设计时部分始终查看 UserControl 所在项目下的文件夹位置，而它的运行时部分需要图像在主应用程序中才能正常运行。

我并没有声称这是正确的解决方案或合理的解决方案，但它在我的情况下有效。欢迎对改进或更好的解决方案提出意见。

更新：经过反复试验 + 一些其他线索 (https://docs.microsoft.com/en-us/previous-versions/dotnet/netframework-4.0/aa970069(v=vs.100))，我想出了一个更简单的解决方案，它（对我来说）有效

在资源声明处：

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

在按钮声明下：

<Image Source="StaticResource mLegend"/>

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

作为最后一步，清理并构建解决方案。

【参考方案10】：

最简单的方法是将图像添加到您的项目中。通过右键单击解决方案资源管理器 -> 添加 -> 文件夹（将其命名为资源） -> 右键单击​​新创建的资源文件夹 -> 单击添加现有项目 -> 查找您的图像（选择所有文件），将资源文件夹添加到您的项目中/p>

将图像项添加到您选择的 xaml 表单。在属性 -> 通用 -> 源下，您应该能够下拉并选择您的图像

Selecting from dropdown

【参考方案11】：

您也可以简单地使用相对路径：

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

【参考方案12】：

这可能就像我今天早些时候所做的一样简单。我将文件放在文件夹中，而没有在解决方案中引用它。它在设计过程中表现良好。

【参考方案13】：

我有同样的问题。 现在它的工作...... 试试这个：

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

【讨论】：

@naltipar 。如果要显示带有图像的按钮，请使用 ImageBrush 代表图像标记。上面的代码是一个示例。忽略它。只需添加按钮并使用 imageBrush。

【参考方案14】：

也许这对使用 Visual Studio 2019 的人有所帮助。我错过了一个简单的 /

步骤： 右键项目—— 添加 > 现有项目 -- 选择要添加的图片—— 在visual studio中点击图片—— 转到属性- 将 Build Action 更改为 > Recources

不，我们进入 Xaml 并添加您的资源

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

图片名称前的/是必须的。如果没有 /，它将显示为在 xaml 中工作，但是一旦您启动程序，它就不会显示。

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

如果您阅读本文，我希望能解决它

【参考方案15】：

如果您使用 DLL 中的图像，请确保 dll 项目在项目的属性中具有默认资源文件设置。并将其访问修饰符更改为 public。 此外，将图像构建操作设置为“资源”

【参考方案16】：

就我而言，我只需要执行两个步骤（属性窗口）： 1）将构建操作（所有资源文件）更改为“资源”； 2) 在源字段中（再次）选择所需的图像。

【参考方案17】：

请检查图像是否包含在解决方案中。如果不包含图像，则单击“显示解决方案中的所有文件”，然后右键单击图像并选择“包含在项目中”选项。 之后它也可以使用相对路径。

例如：

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

【参考方案18】：

1-将文件图片属性改为resource，点击图片文件右键->选择属性->将Build Action切换为Resource。

2- 使用该标签显示图片

 <Image Source="pack://application:,,,/[Put here the  name of the referenced assembly];component/[File path]"/>

例子

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

【参考方案19】：

只需将文件夹“Icons”拖放到您的项目“Images”中即可。 使用相对路径：Image Source="Icons/Button1.png"。

【参考方案20】：

所有非常好的答案。我没有在上面看到这个，虽然它简单明了，但它肯定会导致原始帖子的症状。赶时间很容易忘记。

如果您将图像拖放到项目中，请确保文件已“包含在项目中”。这可以从上下文菜单中快速获得。

【参考方案21】：

在 UWP 中，构建操作没有“资源”选择，但选择“内容”有效，并且是其他 *.png 文件的形式。出于某种原因，对我不起作用的那个是“EmbeddedResource”。 感谢您的建议。

【参考方案22】：

包括程序集名称作品 构建动作=> 资源 复制到输出目录 => 如果更新则复制

   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;

【参考方案23】：

转到SolutionExplorer-->查找您的图像文件夹-->右键单击您的图像并转到属性。将 Build Action None 更改为 Resource...Image Property Change

【参考方案24】：

这对我有用，但只有当我将第 3 步从“嵌入资源”更改为“资源”时。我在这里复制并粘贴了@Mohamed Hussein 的答案，因为我仍然没有足够的声誉在他的帖子下发表评论。 >>>

嗯，我在这个问题上花费了 3 个多小时。您的回答帮助我部分解决了问题，这正是促使我加入这个有用讨论的原因。

我的问题解决了：

1- 选择解决方案资源管理器资源中的所有图像。

2- 右键单击​​并转到属性。

3- 为“嵌入式资源”构建操作 >> 更改为“资源”

4- 复制到输出以“始终复制”

5- 保存并构建解决方案。

6-添加图像并注意ZIndex值。

毕竟，当我多次使用图像或尝试更改为同一图像控件上的另一个图像以将 XAML 或图像控件属性中的图像路径更改为：

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