Svelte Native应用使用ns preview预览时本地图片无法显示

1. 确认资源文件位置 #

把本地图片放在项目的src/assets目录下（没有的话手动创建），比如src/assets/smiley.jpg。

2. 使用NativeScript专属引用前缀 #

Svelte Native基于NativeScript，本地资源需要用res://前缀引用，而非相对路径或~/：

<page>
    <actionBar title="Simple App" />
    <tabView>
        <tabViewItem title="Tab 1">
            <stackLayout>
                <image src="res://assets/smiley.jpg" stretch="none"/>
            </stackLayout>
        </tabViewItem>        
    </tabView>
</page>

3. 配置资源打包规则 #

检查nativescript.config.ts（或nativescript.config.js），确保添加了资源打包配置，让Webpack能正确打包assets目录下的文件：

export default {
  id: 'org.nativescript.myapp',
  appResourcesPath: 'App_Resources',
  webpackConfigPath: 'webpack.config.js',
  sourceDir: 'src',
  assets: [
    { from: 'src/assets', to: 'assets' }
  ]
}

4. 清理缓存重新预览 #

缓存可能导致资源不更新，执行以下命令重置：

ns clean
ns preview

5. 检查图片本身 #

确保图片格式为Android支持的类型（如JPG、PNG），文件名无空格或特殊字符，尽量用小写字母。

内容的提问来源于stack exchange，提问作者ranni rabadi