Dynamically insert images in HTML file

Question

I try dynamically insert images in my HTML file, when I say dynamically it mean when it will be asked by a user, here 2 approce that I imagine, for both case user must before running the code put the images in a specific folder.

Via a switch parameter like: generate-html -includeImages, if switch param is true then convert all images in MyImagefolder and insert one after one in my output.

or

Via a parameter that accept multiple value and in this case user must enter the images names like generate-html -includeImages image1.gif, image2.gif

Here the code that I use for insert one image to my HTML file:

$PSScriptRoot = Split-Path -Parent -Path $MyInvocation.MyCommand.Definition
$image = "$PSScriptRoot\img.gif"
$ImageBits = [Convert]::ToBase64String((Get-Content $image -Encoding Byte))
$ImageHTML = "<img src=data:image/png;base64,$($ImageBits) alt='My Image'/>"

Then I insert my variable in my convertto-html command.

ConvertTo-Html -Body $style -PreContent "$imageHTML" | Out-File "$PSScriptRoot\report.html"

My question is how can i dynamically insert one or multiple image in my html page? I have 2 approaches in my head but i have no idea how realize it. If you have a better idea how can i realize it it will be welcome. Thanks — kekimian, Dec 25 '14 at 23:07

score 4 · Accepted Answer · answered Dec 25 '14 at 23:34

An array of images could be handled like this:

$images = Get-ChildItem "C:\path\to\*.gif"
$ImageHTML = $images | % {
  $ImageBits = [Convert]::ToBase64String((Get-Content $_ -Encoding Byte))
  "<img src=data:image/png;base64,$($ImageBits) alt='My Image'/>"
}

Whether you want to use a switch -IncludeImage and read the images from a pre-defined folder or pass the image paths via the -IncludeImage parameter is up to you. The latter is probably the more versatile approach, as it makes your code independent from a particular folder, but both approaches will work.

A function using a switch parameter might look like this:

function Generate-Html {
  Param(
    [Switch]
    [bool]$IncludeImages
  )

  if ($IncludeImages) {
    $PSScriptRoot = Split-Path -Parent -Path $MyInvocation.MyCommand.Definition
    $images = Get-ChildItem "$PSScriptRoot\*.gif"
    $ImageHTML = $images | % {
      $ImageBits = [Convert]::ToBase64String((Get-Content $_ -Encoding Byte))
      "<img src=data:image/png;base64,$($ImageBits) alt='My Image'/>"
    }

    ConvertTo-Html -Body $style -PreContent $imageHTML |
      Out-File "$PSScriptRoot\report.html"
  }
}

while a function using an array parameter might look like this:

function Generate-Html {
  Param(
    [Parameter()]
    [string[]]$IncludeImages
  )

  if ($IncludeImages) {
    $ImageHTML = $IncludeImages | % {
      $ImageBits = [Convert]::ToBase64String((Get-Content $_ -Encoding Byte))
      "<img src=data:image/png;base64,$($ImageBits) alt='My Image'/>"
    }

    ConvertTo-Html -Body $style -PreContent $imageHTML |
      Out-File "C:\path\to\report.html"
  }
}

Thanks a lot for these examples. But unfortunately it does not work. I receive a error message for each image in folder : — kekimian, Dec 26 '14 at 10:08
Get-Content : Cannot find path 'C:\windows\system32\image.bmp' because it does not exist. — kekimian, Dec 26 '14 at 10:10
Exception calling "ToBase64String" with "1" argument(s): "Value cannot be null. Parameter name: inArray" — kekimian, Dec 26 '14 at 10:11
@user3672134 Either pass the full path to the images or change the working directory to the folder containing them (`Set-Location`). — Ansgar Wiechers, Dec 28 '14 at 00:37
The second example(array parameter) work fine, first example give me always same errors for each image file in folder... But it's ok I will continue with second example. Thanks all for help — kekimian, Dec 28 '14 at 13:03

Dynamically insert images in HTML file

1 Answers1

Linked