google bot : "mixed content" on images

[stockersky]

prerender-spa-plugin": "^3.0.0-beta.2" installed through : npm install prerender-spa-plugin@next --save-dev Vuejs app with vue-cli 3 full SPA (no SSR)

I use this plugin for being properly crawled by Google Bot. Otherwise, the only things this bot sees is the default public/index.html...

After using the "basic usage" conf provided in vue.conf.js, Google Bot can read my site. NOTE : I check this through the Google Search Console URL Inspector.

Warnings returned for every image on my landing page are:

Mixed Content: The page at 'https://www.mysite.com/' was loaded over HTTPS, but requested an insecure image 'http://localhost:8001/img/logo.5534a7a4.png'. This content should also be served over HTTPS. https://www.mysite.com/:0

Indeed, the new index.html generated contains references to http://localhost.

None of my images were loaded by the bot.

[camhart]

Did you ever figure out a solution for this?

[yungkeatchan97]

I got this problem too, so I did a workaround by prepending my domain at my image path, i.e. Before: <img src="/some/image.jpg" > After: <img src="https://www.mysite.com/some/image.jpg" >

This worked, but to make it working in both development and production, I add my domain in the .env file and prepend it dynamically, i.e. // .env

MY_DOMAIN=https://www.mysite.com

// my Vue component

<img :src="image" >
...
<script>
   ...
   data() {
      return {
         image: process.env.MY_DOMAIN + '/some/image.jpg'
      }
   }
</script>

unfortunately <img :src="process.env.MY_DOMAIN + '/some/image.jpg'" > will NOT work