Unable to get images (using relative Paths, absolute Paths and "@"-alias)

[Eskamedin]

I have different sizes of one picture where i want Vue to decide which one to use dependant on the screensize. I know that there are better/other ways but for now my problem is with finding those pictures to begin with)
This is my Folder structure:

vue_app
-node_modules
-public
-src
 -assets
 -components
   -sections
     -TheAbout.vue
 -img
   -sectionAbout
     -kamedin-300.png
     -kamedin-550.png
[...]

I want to use the pictures "kamedin [...]" within my TheAbout.vue Component. Thats why i used a relative Path from the component itself towards the images (like i actually always do):

TheAbout.vue:

<template>
    [...]
    <img alt="Kamedin Portrait" ref="image" />
    [...]
</template>

<script>
export default {
    mounted() {
        this.insertImage();
    },
    methods: {
        insertImage() {
            let image = this.$refs.image;
            console.log(image);
            if(innerWidth < 576) {
                image.setAttribute("src", "../../img/sectionAbout/kamedin-300.png");
            }
            if(innerWidth < 768 && innerWidth > 576) {
                image.setAttribute("src", "../../img/sectionAbout/kamedin-550.png");
            }
            
        }
    },
}
</script>

This is what i get:

According to this error i guess vue ignores the relative path and always starts from the root path, because the URL in the error message goes directly to /img after localhost:8080/ so i changed the path to:

"src/img/sectionAbout/kamedin-300.png"

But this resolves into the same error with the following URL:

After a little research i discovered that you can define an alias "@" for the src folder, so i edited the existing vue.config.js to:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true, //this line was already here
  configureWebpack: {
    resolve: {
      alias: {
        "@": require("path").resolve(__dirname, "src"),
      },
    },
  },
});

and changed the paths to this structure:
"@/img/sectionAbout/kamedin-300.png"

But even that resolved in the same error:

According to the URL and the existence of the "@" i assume that Vue didnt even recognized the @ Sign as an alias.

How can i manage handling my images and whats the reason it didnt work?

[Eskamedin]

I solved the problem by using require("@/img/sectionAbout/kamedin-300.png") because i learned that the @ alias is meant to be used within the templates. Is that correct?

On the other hand? Why didnt it work with the relative Paths? What do i need to consider in the future when i want to use images with relative Paths?

[LinusBorg]

Your issue is that you use a path relative to the folder structure of your source files, but set that path at runtime manually on the img element.

At that point in time, your app has already been bundled, and the source folder structure is not "there" anymore - you only serve the content of the dist folder, right?

When you use relative paths like that, you have to use require()(or import in modern JS) so that webpack can actively process that as an image path and transform it into a path that works after bundling.

if you set the relative path directly in the template, it also works, without any require(), because the Vue template compiler can transform this relative path into a require() call behind the scenes - because it can see it being used as an image src path.

[Eskamedin]

Linus you are a good man! Thank you for that explanation. Thats sth you wont hear in any courses i suppose. Thank you very much