loader返回的字符串被转成了base64

[smile-alive]

这个特性解决了什么问题？

将本地的图片通过webpack loader的方式上传至cos，上传成功将cdn地址返回，现在自定义loader中返回的cdn地址在jsx打印被转成了base64

config.index.js

loader配置

loader中打印返回的url

➜  sylas git:(main) ✗ yarn dev:weapp
yarn run v1.22.19
$ npm run build:weapp -- --watch

> sylas@1.0.0 build:weapp
> taro build --type weapp --watch

👽 Taro v3.6.2

Tips:
1. 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ NODE_ENV=production taro build --type weapp --watch


Prebundle dependencies: 
     @tarojs/plugin-framework-react/dist/runtime
     @tarojs/plugin-platform-weapp/dist/runtime
     @tarojs/runtime
     @tarojs/taro
     react
     react-dom
     react/jsx-runtime


✔ Webpack
  Compiled successfully in 1.20s

⬡ CDN-LOADER: /Users/smile/Desktop/sylas/src/static/image/test.jpg -> https://sylas-image.vhhg.site/7ecddf7606396a4b03e42d56a1e585e9.jpg
🚀 ~ file: index.js:84 ~ .then ~ baseUrl: module.exports = "https://sylas-image.vhhg.site/7ecddf7606396a4b03e42d56a1e585e9.jpg";
⬡ CDN-LOADER: /Users/smile/Desktop/sylas/src/static/image/放大镜.png -> https://sylas-image.vhhg.site/e057100fd2baa9a508d217a92d5b6d10.png
🚀 ~ file: index.js:84 ~ .then ~ baseUrl: module.exports = "https://sylas-image.vhhg.site/e057100fd2baa9a508d217a92d5b6d10.png";
⬡ CDN-LOADER: /Users/smile/Desktop/sylas/src/static/image/smi.jpg -> https://sylas-image.vhhg.site/b539b4ca154df6324a94d310d34384a7.jpg
🚀 ~ file: index.js:84 ~ .then ~ baseUrl: module.exports = "https://sylas-image.vhhg.site/b539b4ca154df6324a94d310d34384a7.jpg";
→ Watching... [2023/4/3 10:29:43]

jsx中打印图片的引用

import { View, Image } from '@tarojs/components';
import React from 'react';
import src1 from '@/static/image/test.jpg';
import src2 from '@/static/image/放大镜.png';
import './index.scss';

console.log('🚀 ~ file: index.tsx:4 ~ src1:', src1);
// 🚀 ~ file: index.tsx:4 ~ src1: data:image/jpeg;base64,bW9kdWxlLmV4cG9ydHMgPSAiaHR0cHM6Ly9zeWxhcy1pbWFnZS52aGhnLnNpdGUvN2VjZGRmNzYwNjM5NmE0YjAzZTQyZDU2YTFlNTg1ZTkuanBnIjs=
// echo bW9kdWxlLmV4cG9ydHMgPSAiaHR0cHM6Ly9zeWxhcy1pbWFnZS52aGhnLnNpdGUvN2VjZGRmNzYwNjM5NmE0YjAzZTQyZDU2YTFlNTg1ZTkuanBnIjs= | base64 -D
// module.exports = "https://sylas-image.vhhg.site/7ecddf7606396a4b03e42d56a1e585e9.jpg";%
const Home: React.FC = () => {
	return (
		<>
			<View className='home-page'>
				<Image src={src1} />
				<Image src={src2} />
			</View>
		</>
	);
};

definePageConfig({
	navigationBarTitleText: 'home'
});

export default Home;

taro info

➜  sylas git:(main) ✗ taro info
👽 Taro v3.5.11


  Taro CLI 3.5.11 environment info:
    System:
      OS: macOS 13.2.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.18.1 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.19.2 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.2 => 3.6.2 
      @tarojs/components: 3.6.2 => 3.6.2 
      @tarojs/helper: 3.6.2 => 3.6.2 
      @tarojs/plugin-framework-react: 3.6.2 => 3.6.2 
      @tarojs/plugin-platform-weapp: 3.6.2 => 3.6.2 
      @tarojs/react: 3.6.2 => 3.6.2 
      @tarojs/router: 3.6.2 => 3.6.2 
      @tarojs/runtime: 3.6.2 => 3.6.2 
      @tarojs/shared: 3.6.2 => 3.6.2 
      @tarojs/taro: 3.6.2 => 3.6.2 
      @tarojs/webpack5-runner: 3.6.2 => 3.6.2 
      babel-preset-taro: 3.6.2 => 3.6.2 
      eslint-config-taro: 3.6.2 => 3.6.2 
      react: ^18.0.0 => 18.2.0 
    npmGlobalPackages:
      typescript: 4.9.3

期望结果

页面中的图片引用为cdn地址，可以正常回显

补充

1.创建新CRA项目正常使用，可以确定不是自定义loader导致的
2.baseUrl直接返回url一样被转成了base64，实测只要不是返回的loader函数的source都会被转成base64
3.回退至webpack4，页面中打印没有被转成base64，但是也没有返回预期的结果

import { View, Image } from '@tarojs/components';
import React from 'react';
import src1 from '@/static/image/test.jpg';
import src2 from '@/static/image/放大镜.png';
import './index.scss';

console.log('🚀 ~ file: index.tsx:4 ~ src2:', src2);
// 🚀 ~ file: index.tsx:4 ~ src2: /static/image/放大镜.png
const Home: React.FC = () => {
	return (
		<>
			<View className='home-page'>
				<Image src={src1} />
				<Image src={src2} />
			</View>
		</>
	);
};