CapacitorJS在JavaScript文件中调用本地图片不显示问题求助

问题描述 #

CapacitorJS项目其他功能正常，但在JS中动态插入本地图片时无法显示，网络图片和直接在index.html中写img标签的方式均正常。尝试过修改相对路径、在public文件夹创建img目录，但执行npm run build后该文件夹会被自动删除。

示例1（无法显示）：

document.getElementById('root').innerHTML = `<img id="logo_apps" style="width:110px;" src="img/logo.png" />`;

示例2（正常显示）：

document.getElementById('root').innerHTML = `<img id="logo_apps" style="width:110px;" src="https://google.com/img/logo.png" />`;

解决方法 #

1. 确保图片资源被正确打包

• 将图片放在项目的public根目录，或者public/assets/img这类子目录中（避免单独创建的public/img被构建工具忽略）。
• 检查构建工具配置：
  • 若使用Vite，默认会完整复制public目录下的所有文件到dist，无需额外配置；
  • 若使用Webpack，需通过copy-webpack-plugin指定复制规则，确保图片目录被保留。

2. 使用根路径引用图片

动态插入时，采用以/开头的绝对路径引用，避免相对路径带来的解析问题：

// 图片放在public根目录时
document.getElementById('root').innerHTML = `<img id="logo_apps" style="width:110px;" src="/logo.png" />`;

// 图片放在public/assets/img时
document.getElementById('root').innerHTML = `<img id="logo_apps" style="width:110px;" src="/assets/img/logo.png" />`;

3. 阻止构建时删除资源目录

• 若使用Webpack，添加copy-webpack-plugin配置，强制复制图片目录：

  const CopyPlugin = require('copy-webpack-plugin');
  
  module.exports = {
    plugins: [
      new CopyPlugin({
        patterns: [
          { from: 'public/img', to: 'img' } // 把public/img复制到dist/img
        ]
      })
    ]
  };
  

• 若使用Vite，确保vite.config.js中没有修改publicDir配置（默认值为public，会完整复制目录内容）。

4. 验证构建后的资源

执行npm run build后，打开dist目录确认图片是否存在于对应路径，再通过浏览器直接访问图片URL（如http://localhost:3000/logo.png），确认资源可正常加载。

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