UI image location under vite

[timdrysdale]

For context, I've just added the almost-latest or latest version of dpreid/penduino-ui to the repo, after porting to vite, which I want us to use going forward. With the vite build, the images look like they should be referred to as /images/someimage.png, so there are a few links to change over in the code.
Nonetheless, the ruler and protractor are showing up, so the other images are too - just a chore rather than bug.

 vite v2.9.15 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 291ms.

files in the public directory are served at the root path.
Instead of /public/images/practable-icon.png, use /images/practable-icon.png.
files in the public directory are served at the root path.
Instead of /public/images/ruler.png, use /images/ruler.png.
files in the public directory are served at the root path.
Instead of /public/images/protractor.png, use /images/protractor.png.

$ cd src &&  grep -r 'public/images' .
./components/Workspace.vue:    <img id="ruler-image" src="../../public/images/ruler.png" hidden>
./components/Workspace.vue:    <img id="protractor" src="../../public/images/protractor.png" hidden>
./components/GraphOutput.vue:                    <img id='linear_function' src='../../public/images/LinearFunction.png'>
./components/GraphOutput.vue:                    <img id='linear_function' src='../../public/images/QuadraticFunction.png'>
./components/GraphOutput.vue:                    <img id='trig_function' src='../../public/images/TrigFunction.png'>
./components/GraphOutput.vue:                    <img id='linear_function' src='../../public/images/ExpFunction.png'>
./components/Workspace-OLD.vue:    <img id="protractor" src="../../public/images/protractor.png" hidden>
./components/Workspace-OLD.vue:    <img id="ruler" src="../../public/images/ruler.png" hidden>
./components/Workspace-OLD.vue:    <!-- <img id="caliper" src="../../public/images/caliper.png" hidden> -->
./components/NavigationBar.vue:          <img src="../../public/images/practable-icon.png" width="30" height="30" alt="">
./components/DataRecorder.vue:        <img id='red-light' src='../../public/images/red-light.png' width='20' height='20' :hidden='!showRedLight'>