语法错误：意外的字符 '?'尝试使用 PDFKIT 插入图像时

问题描述

我目前正在使用 PDFKIT 库从我的服务器创建 pdf，然后通过电子邮件将它们发送给我们的员工。我遇到的问题是，当我尝试将图像插入 pdf 文档然后构建我的应用程序时，应用程序失败并显示以下错误：

D:\MyProj\node_modules\babel-register\node_modules\babel-core\lib\transformation\file\index.js:558
      throw err;
      ^

SyntaxError: D:/MyProj/public/Images/logo.jpg: Unexpected character '�' (1:0)
> 1 | ����
error Command Failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command Failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我在网上读到这可能是 webpack 及其图像加载器的问题。目前我正在使用文件加载器库，这是其他人针对此问题推荐的，但我仍然没有任何运气。

这是我的 letter.js 文件：

const PDFDocument = require('pdfkit');
import { salesTransport } from '../Utilities/EmailService';
import logo from '../../../public/Images/logo.jpg';
const LINE_SPACING = 18;
const FONT_SIZE = 11;
const LETTER_heading = `heading HERE`

export const StoreLetter = (index,store,pdf) => {
    return new Promise(async(resolve,reject) => {
        try {
            !index ? null : pdf.addPage();
            pdf.fontSize(FONT_SIZE);
            pdf.font('Helvetica');
            pdf.img(logo,320,280);
            pdf.text(LETTER_heading)
            pdf.text(`Some text here`)
            resolve(true);
        } catch (e) {
            console.error(`letter.StoreLetter: ${e}`);
            reject(e);
        }
    })    
}

export const CreateLetters = async () => {
    try {
        const pdf = new PDFDocument();

        for(let i = 0; i < 3; i++){
            await StoreLetter(i,false,pdf);
        }

        pdf.end();

        const attachment = [{filename: 'letters.pdf',content: pdf}]
        const msg = 
        `
        <div style="text-align:center;">
            <h1>Letters</h1>        
        </div>
        `
        SendEmail(msg,attachment,`Letters`)
    } catch (e) {
        console.error(`letter.CreateLetters: ${e}`)
    }
}

这是我的 package.json 文件：

{
  "name": "my-app","version": "0.0.2","main": "index.js","license": "MIT","scripts": {
    "start": "node src/entry","start-dev": "npm-run-all --parallel build babel-node","serve": "live-server public/","build-linux": "clear && webpack && clear && yarn build-server && clear && yarn start","build-windows": "cls && webpack && cls && yarn build-server && cls && set REACT_APP_ENV=development && yarn start","build-server": "babel src/server -d src","dev-server": "webpack-dev-server","babel-node": "nodemon --exec babel-node src/server.js"
  },"dependencies": {
    "@googlemaps/google-maps-services-js": "^3.1.16","aws-sdk": "^2.358.0","axios": "^0.19.0","babel-cli": "^6.26.0","babel-core": "^6.26.3","babel-loader": "7.1.1","babel-plugin-transform-class-properties": "6.24.1","babel-polyfill": "^6.26.0","babel-preset-env": "^1.7.0","babel-preset-react": "6.24.1","babel-preset-stage-0": "^6.24.1","bcryptjs": "^2.4.3","body-parser": "^1.18.2","compression-webpack-plugin": "^6.0.2","core-js": "^2.5.3","css-loader": "0.28.4","express": "latest","file-loader": "^1.1.11","fs": "0.0.1-security","google-maps-react": "^1.1.4","googleapis": "^67.1.1","html2canvas": "^1.0.0-rc.3","image-webpack-loader": "^4.6.0","immutability-helper": "^2.4.0","jquery": "^3.4.1","jsonwebtoken": "^8.1.0","jspdf": "^1.5.3","lodash": "^4.17.14","mailgun-js": "^0.22.0","md5": "^2.3.0","moment": "^2.29.1","moment-timezone": "^0.5.32","node-sass": "^4.11.0","node-schedule": "^1.3.2","nodemailer": "^4.7.0","normalize.css": "7.0.0","npm": "^6.10.1","papaparse": "^5.3.0","pdfkit": "^0.11.0","promise-MysqL": "^3.1.0","prop-types": "^15.6.0","react": "^16.0.0","react-csv": "^1.0.14","react-dom": "^16.0.0","react-ga": "^3.1.2","react-router-dom": "4.2.2","react-scripts": "^2.1.3","sass-loader": "6.0.6","socket.io": "^2.0.3","style-loader": "0.18.2","table2csv": "^1.1.1","twilio": "^3.24.0","validator": "8.0.0","webpack": "^4.44.2","webpack-cli": "^3.3.12","webpack-dev-middleware": "^3.5.0","webpack-dev-server": "^3.1.14"
  },"devDependencies": {
    "concurrently": "^3.5.0","npm-run-all": "^4.1.1"
  }
}

这是我的 webpack.config 文件：

const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  entry: ['babel-polyfill','./src/index.js'],mode: "development",output: {
    path: path.join(__dirname,'public'),filename: 'bundle.js'
  },plugins: [
    new CompressionPlugin(),],module: {
    rules: [{
      loader: 'babel-loader',test: /\.(js|jsx)$/,exclude: /node_modules/
    },{
      test: /\.s?css$/,use: [
        'style-loader','css-loader','sass-loader'
      ]
    },{
        test: /\.(jpe?g|png|gif|svg|mp3)$/i,loaders: [
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }
    ]
  },devtool: 'cheap-module-eval-source-map',devServer: {
    contentBase: path.join(__dirname,historyApiFallback: true
  }
};

我已经检查并确保图像的路径正确。我也尝试过使用 path 库，但收到相同的错误消息。我在网上寻找类似的解决方案，但没有一个对我有用。如果有人对此有解决方案或我可以尝试的想法，那将对我有很大帮助。 TIA！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

pdfkit pdfkit webpack webpack webpack