Swift实现HTML转PDF遇图片路径问题：图片无法显示

Hey there! Let’s troubleshoot why your images aren’t loading when you export your HTML to PDF. Based on your file structure and code snippets, here are the most practical fixes to try out:

• Switch to absolute file paths
  Many PDF conversion tools (like wkhtmltopdf, jsPDF) parse relative paths differently than web browsers. If your HTML uses relative paths like images/logo.png, try replacing them with full absolute paths instead. For example:

  <img src="C:/your-project-folder/images/logo.png" alt="Logo">
  

  On Mac/Linux, this would look like /home/your-user/your-project/images/logo.png.

• Set the correct working directory for your conversion tool
  If you’re using a command-line tool, it might be running from a different folder than your HTML file, making relative paths useless. Before running the conversion command, navigate to your HTML’s directory first:

  cd /path/to/your/html-file-directory
  wkhtmltopdf your-file.html output.pdf
  

• Double-check path spelling and case sensitivity
  Even if your OS ignores case (like Windows), some cross-platform PDF tools don’t. Make sure the filename in your HTML matches the actual image file exactly—Logo.png vs logo.png can break the path.

• Add a <base> tag to your HTML
  Define a base URL in your HTML’s <head> to tell the conversion tool where to look for all relative assets. This ensures consistent path resolution:

  <head>
    <!-- For Windows -->
    <base href="file:///C:/your-project-folder/">
    <!-- For Mac/Linux -->
    <!-- <base href="file:///home/your-user/your-project-folder/"> -->
  </head>
  

  Then you can keep using relative paths like images/logo.png in your <img> tags.

• Embed images as Base64 (no more path issues!)
  If all else fails, convert your images to Base64 and embed them directly into the HTML. This removes any dependency on external file paths. You can use an online Base64 converter to get the code, then update your <img> tag:

  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVEjH7c4hAQAAAMKg9U9tDQ+gAAAAASUVORK5CYII=" alt="Embedded Image">
  

Give these steps a shot—one of them should get your images showing up in the PDF. If you hit a snag with any specific step, feel free to ask for more details!

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