OJet项目中页面无法显示.png图片求助

嘿，我之前在OJet项目里也踩过资源路径的坑，给你几个实用的排查和解决方向：

1. 遵循OJet的资源目录规范（最省心的方式） #

OJet默认会把静态资源（图片、样式、字体这类）放在src/resources文件夹下，构建时会自动把这些资源复制到输出目录（比如web/resources）。你现在把图片放在src/js/views里，构建工具大概率不会自动同步这个位置的资源到运行目录，导致页面找不到文件。

建议把图片移到src/resources/images，然后修改img标签的路径：

<img src="../resources/images/xxx.png" style="width:89.25pt;height:18.75pt;" alt="xxx logo">

这个相对路径是基于视图文件的位置（src/js/views），往上跳一级到js目录，再进入resources/images就能找到图片了。

2. 用开发者工具排查实际请求路径 #

启动开发服务器（ojet serve）后，按F12打开浏览器开发者工具，切换到网络标签，刷新页面看加载xxx.png的请求状态：

• 如果是404错误，看请求的URL是什么（比如http://localhost:8000/js/views/xxx.png），对比你的实际文件位置调整路径。
• 确认图片文件名和大小写是否一致（OJet的开发环境对大小写敏感）。

3. 自定义构建规则（一定要放在views目录的话） #

如果你坚持要把图片留在src/js/views，需要修改项目根目录下的oraclejet-build.js，添加资源复制规则，让构建工具把图片同步到输出目录：

// 在copyCustom任务里添加以下配置
copyCustom: {
    files: [
        {
            expand: true,
            cwd: 'src/js/views',
            src: ['*.png'], // 可以根据需要改成具体文件名或其他格式
            dest: 'web/js/views'
        }
    ]
}

修改完后重新运行ojet build或ojet serve，图片就会被复制到对应的运行目录了。

4. 用RequireJS路径别名（更规范的模块化方式） #

OJet基于RequireJS管理资源，你可以在src/js/main.js里配置图片的路径别名：

requirejs.config({
    paths: {
        'images': '../resources/images' // 映射到资源目录
    }
});

之后在视图里可以用绝对路径引用：

<img src="/js/images/xxx.png" style="width:89.25pt;height:18.75pt;" alt="xxx logo">

如果是在JS视图里动态创建图片元素，还可以用require.toUrl('images/xxx.png')来获取正确的完整路径。

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