uni-app APP打包、真机运行vue3 renderjs无法import png图片

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app APP打包、真机运行vue3 renderjs无法import png图片

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

<script module="arcgis" lang="renderjs">  
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";  
import stickPic from "../../static/img/map/stick.png";  //这里报错  

var stickLayer=new FeatureLayer({  
    renderer:{  
        type:"simple",  
        symbol:{  
            type: "picture-marker",  
            url:stickPic,  
            width:"13.2px",  
            height:"20px"  
        }  
    },  
});  
</script>

操作步骤：

运行到手机或模拟器、APP云打包，在代码编译的环节（还未到APP运行或者提交打包），HBuilder报错；但是开发过程中Chrome浏览器预览没有问题。

预期结果：

能够通过编译，和开发过程中运行到Chrome浏览器的表现一致

实际结果：

无法通过编译，HBuilder报错

18:44:13.177 X [ERROR] No loader is configured for ".png" files: E:/工作/昆山基础设施平台/6/道路巡检养护/道路巡检养护/static/img/map/stick.png
18:44:13.188     <stdin>:12:25:
18:44:13.194       12 │     import stickPic from "../../static/img/map/stick.png";
18:44:13.205          ╵

Harmonyos Next教程
1 回复

在uni-app中使用Vue 3和render.js时，你可能会遇到在render.js中无法直接通过import语句导入PNG图片的问题。这是因为render.js运行在原生线程中，与Web线程（即传统的Vue组件）有所不同，原生线程不支持像Web线程那样的资源导入机制。然而，你可以通过其他方式将图片资源加载到render.js中。

以下是一个使用uni.request和Base64编码来处理PNG图片的示例代码。这种方法允许你在render.js中动态加载和使用图片资源。

1. 在Web线程中转换图片为Base64

首先，在你的Vue组件或一个单独的JS文件中，将PNG图片转换为Base64编码。

// convertImageToBase64.js
export function convertImageToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: imageUrl,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}

然后，在你的Vue组件中调用这个函数，并将结果传递给render.js。

// YourVueComponent.vue
<script setup>
import { convertImageToBase64 } from '@/utils/convertImageToBase64.js';

const imageUrl = '/static/your-image.png'; // 图片路径

convertImageToBase64(imageUrl).then((base64) => {
  // 将Base64字符串传递给render.js
  uni.setStorageSync('imageBase64', base64);
}).catch((err) => {
  console.error('Failed to convert image:', err);
});
</script>

2. 在Render.js中读取Base64字符串

接下来，在render.js中，你可以从存储中读取这个Base64字符串，并使用它。

// render.js
const imageBase64 = uni.getStorageSync('imageBase64');

if (imageBase64) {
  // 假设你要在Canvas上绘制这个图片
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = imageBase64;

  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    // 你可以在这里进一步处理canvas，比如导出为图片或进行其他绘制操作
  };
}

这种方法虽然稍微复杂一些，但它允许你在render.js中使用图片资源，同时保持应用的性能和灵活性。注意，这种方法依赖于uni-app的存储系统来传递数据，因此要确保在调用render.js逻辑之前，Base64字符串已经被成功存储。

回到顶部