vuejs3 - Vue3 gets 404 on img after build, but works on serve

Question

I have found some related issues, but none of them worked for me. It works well on serve-script, but not on build-script. I get a 404 for my logo-image, but weirdly it works for the background-image.

My image is under /src/assets/mylogo.png

And I'd like to use it in /src/App.vue

For some reason Vue resolves the path to /img/mylogo.dbc82912.png instead of /domain/subdirectory/vue-app/dist/img/background.fa7a8b55.png

I tried all possibilities I found:

<!-- 1. approach -->
<a href="https://mypage">
  <img
    :src="require('@/assets/mylogo.png')"
    alt="Official logo"
    style="max-width: 40px; width: 100%; height: auto"
  />
</a>

I also tried

<!-- 2. approach -->
<a href="https://mypage">
  <img
    src="./assets/mylogo.png"
    alt="Official logo"
    style="max-width: 40px; width: 100%; height: auto"
  />
</a>

and

<!-- 3. approach -->
<img
  :src=mylogo
  alt="Official logo"
  style="max-width: 40px; width: 100%; height: auto"
/>
[...]
data() {
  return {
    mylogo: require("@/assets/mylogo.png"),
  };
},

I use @vue/cli 4.5.8 and "vue": "^3.0.0" and Firefox 84.0.1 (64-bit), but same on Chrome.

Any idea? I'd appreciate a hint.

question from:https://stackoverflow.com/questions/65648476/vue3-gets-404-on-img-after-build-but-works-on-serve

Answer 1

This cost me quite some time, but I learned something new. Turned out vue-cli was not happy, that the project was embedded in a larger project. So thanks to

Deploy VueJS App in a subdirectory

and

https://cli.vuejs.org/config/#publicpath

The solution was

// vue.config.js placed in root
module.exports = {
  publicPath: "./",
};