图像在C# WPF运行时未显示

Question

我正在尝试在WPF中显示一张图片，但出于某种原因，图片无法显示！它在Visual Studio编辑器中出现，但当我运行应用程序时它不会出现。

这是我的一些代码：

这是我尝试显示图片的方式：

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

我也尝试使用了这个：

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

- EthanBar

---

你尝试过在SO上搜索吗？一个可能有帮助的快速搜索结果是：https://dev59.com/rmct5IYBdhLWcg3wsfkZ和https://dev59.com/gmUo5IYBdhLWcg3w9jV4 - JARRRRG

诀窍是将图像文件添加到您的Visual Studio项目中，并将其构建操作设置为资源（默认情况下应该是这样）。 - Clemens

Answer 1

在你的项目中:

1. 创建一个名为"img"的文件夹，右键单击它并选择添加现有项将图像添加到文件夹中。
2. 进入所添加图像的属性，将Build Action设置为Resource。

这对我起作用了。

在XAML中

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

- swapnil

---

我必须将“Build Action”设置为“嵌入式资源”。 - intrixius

我不得不进行多次构建和重建，还清理了bin和obj文件夹，并最终勾选了“输出目录”的“始终复制”选项，才使它最终正常工作。我可以说，图像的名称、宽度、高度等并不影响图像的显示。在这里至关重要的是让VS最终构建正确的版本，并将图像嵌入可执行文件中。 - Arsen Khachaturyan

对于该路径，您不需要将其设置为“资源”，“内容”就足够了。如果将其设置为“资源”并且“复制到输出目录”为true，则它将被编译到程序集中，并被复制到输出目录 - 因此实际上会被复制两次。 - dsdel

我还需要执行“生成 -> 清理解决方案”、“生成解决方案”才能使其正常工作。 - Upulie Han

似乎微软的某个人还没有收到“备忘录” - 你必须先清理再重新构建才能使更改生效。这似乎很奇怪，但这就是有效的方法。 - Redgum

Answer 2

如果这些方法都不起作用，尝试将 构建操作 更改为 内容。

在我长时间苦苦挣扎之后，这就是对我有用的方法。

- Scott Madeux

---

谢谢。我尝试了这里建议的“资源”和“嵌入式资源”，但是在.NET 6中，使用“内容(Content)”才行。 - UchiTesting

该内容也适用于使用.NET 6的VS 2022。 - Mike Upjohn

@MikeUpjohn 我也是。VS2022，尝试了大多数选项，发现 Content 是最好的选择。也许有一天我会真正去了解它们的含义 :-)) - Xan-Kun Clark-Davis

Answer 3

在 Visual Studio 中进入图像属性，将 "Build Action" 更改为 "Resource" ，将 "Copy to Output Directory" 更改为 "Copy if newer"。

我需要重新构建一下，但之后就可以正常工作了。感谢 swapnil。

- Christoffer Eriksson

Answer 4

请将图片拖到图片源位置，格式应该是这样的：/img/image.jpg"。

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

- Harjeet Singh

---

我做了这个，但它没有起作用。语法是正确的，但你需要更改图像属性。 - swapnil

Answer 5

例如，这是您的项目结构。

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

如果您想在XAML窗口中访问amogus.png，有两种方法：

请注意，这种方式下，imagesFolder将在发布版本中对用户可见

1. 将amogus.png的Build Action设置为Content，并将Copy to Output Directory设置为Copy alwaysmore info，然后从构建菜单中进行rebuild，最后将其添加到窗口XAML中。

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

注意：这种方式下，imagesFolder在发布版本中对用户不可见。

2. 将amogus.png的Build Action设置为Resource，将 Copy to Output Directory设置为Do not copy或blank更多信息， 然后从构建菜单中选择rebuild，接着将其添加到窗口xaml文件中。

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

更多细节

- RoadRoller01

Answer 6

如果以上方法都不起作用，尝试从构建菜单中重新构建您的应用程序。不是“构建”，而是“重新构建”。

- Tyler Pantuso

Answer 7

1. 在解决方案资源管理器中右键单击项目名称，选择添加 -> 新建文件夹。
2. 将此文件夹命名为Images
3. 右键单击 Images 文件夹，选择添加 -> 现有项，然后选择您的image.png文件
4. 在您的 image.png 属性中调整生成操作 -> 资源
5. 现在您的图像源是Source="Images/image.jpg"
6. 您应该在 VS 的设计窗口中看到您的图像。编译之前不要忘记清理代码

- UJK

Answer 8

不需要进行清理和重建。我尝试了上面列出的每个组合（我在VS2017中）

1. 转到 项目->属性->资源
2. 选择文件（下拉菜单有字符串、图像、图标等选项）
3. 点击 添加资源->现有文件
4. 浏览到图像并导入它
5. VS将其识别为图像（我的是PNG），并切换到显示图像资源的视图
6. 选择图像缩略图，然后在其属性中（类型应该是位图）设置持久性为嵌入在resx文件中
7. 我保存并关闭了项目属性，因为我之前很困惑
8. 转到项目下的资源文件夹，并选择图像（它应该已经为您列出）
9. 选择图像，将构建操作设置为嵌入式资源
10. 我将文件操作设置为如果新的则复制

从这里开始，我在调试和运行时之间来回移动，以各种组合进行清理、构建和发布，最终每次都成功地显示了图像。

最后一点，对话框中的XAML如下：

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

我已经按照上述步骤更新了几个本应显示图形但并非总是如此的项目。它们现在都可以正常工作。在VS2017和VS2019中进行了测试，目前没有错误。

- Paul Wichtendahl

Answer 9

在解决方案资源管理器上右键单击图像，选择属性，然后将构建操作设置为资源。

- Rodrigo Balibrera

Answer 10

我最终通过在XAML中使用相对路径解决了这个问题：

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

在 csproj 文件中创建一个 ItemGroup，并将图像设置为 Resource。

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

在进行更改后，我必须使用重新生成项目按钮才能正确展示图片。
值得一提的是，我使用的是dotnet 6。

- Hailey