Nativescript 角度本地文件系统图像未显示答案

【问题标题】：Nativescript angular local file system images not showingNativescript 角度本地文件系统图像未显示
【发布时间】：2018-10-03 09:08:37
【问题描述】：

我已经使用带有导航抽屉模板的 nativescript side kick 软件创建了 nativescript angular 应用程序，我想从本地文件系统在主页中显示图像。

我正在使用最新的 angular 和 nativescript

应用程序

--> 图片

--> 主页

本地构建和云端构建

<Image src="res://icon" ></Image> --> 显示图片

<Image src="../images/intensepic.jpg" ></Image> --> 如果我点击“..images/intensepic.jpg”，使用 ctrl+点击它进入项目中的图像路径并选择图像，但图像没有显示在应用程序中。

<Image src="~/images/intensepic.jpg" ></Image> --> 如果我点击“~/images/intensepic.jpg”，使用 ctrl+单击它在项目中的失败查找图像并且无法选择图像并且图像未显示在应用程序中。

<Image src="/app/src/images/intensepic.jpg" ></Image> --> 如果我使用 ctrl 点击“/app/src/images/intensepic.jpg”+点击它的图像路径并选择图像，但图像没有显示在应用程序中。

<Image src="res://icon" ></Image> --> 显示图片

<Image src="../images/intensepic.jpg" ></Image> --> 应用中没有显示图片。

<Image src="~/images/intensepic.jpg" ></Image> --> 图像显示在应用程序中。

您的问题出现在哪个平台上？两个都

【问题讨论】：

问题在这里得到了解答github.com/NativeScript/NativeScript/issues/6343
@NickIliev 我用你的例子测试了我仍然看不到图像，我在 github.com/NativeScript/NativeScript/issues/6343 中发布了结果屏幕

【解决方案1】：

由于图片在 images 文件夹中而不是在 App 资源中，因此无需使用 res:// 一定是图片路径有问题试试这个

<Image src="~/images/intensepic.jpg"></Image>

或

<Image src="~/app/images/intensepic.jpg"></Image>

【讨论】：

【解决方案2】：

请通过doc了解图像路径的工作原理。

res:// - 如果图像放置在位于 App_Resources 内的 iOS / Android 可绘制文件夹中，则使用前缀。

~/ - 指向应用程序目录。

相对路径之间可能根本不起作用。如果您确定路径正确，请尝试运行干净的构建以确保复制所有资源。

【讨论】：

嗨 Manoj，我正在尝试所有可能的方法，我可以使用资源图像 '(res://)' 和 http 图像 url，但不能使用文件系统图像 '(~/)'
如果您使用的是 webpack，默认情况下，构建过程会将所有图像复制到应用程序资源中，并且在应用程序文件夹中不可用。
嗨 Manoj，我是 nativescript 的新手，您能否提供有关您对 webpack 构建的评论的更多信息，我正在使用 sidekick 构建应用程序而不是使用 webpack 构建选项，您能否提供代码使用 webpack 和没有 webpack 构建显示图像。我在我的问题中添加了我的源代码和结果图像。
建议使用 webpack 以获得更好的性能和更小的包大小，SideKick 只是一个 GUI 工具，在内部它只是中继 NativeScript CLI 来构建应用程序。在此处阅读有关 webpack 的更多信息 - docs.nativescript.org/performance-optimizations/… 我想使用 res:// 对您来说应该不是问题。