v-img not showing image from folder

Question

So the last two images are not displaying on my site, the images are located locally in the src/assets/images folder. What am I missing?

<template>
  <section id="projects" class="project-section">
    <v-container>
      <v-row>
        <v-col>
          <h1>Projects</h1>
        </v-col>
      </v-row>
      <v-row class="justify-space-around">
        <v-card
          v-for="project in projects"
          :key="project.name"
          max-width="300px"
        >{{ project.image }}
          <v-img class="align-end" width="200" :src="project.image" />
          <v-card-title>{{ project.name }}</v-card-title>
          <v-card-subtitle class="pb-0"> {{ project.tech }}: </v-card-subtitle>

          <v-card-text class="text--primary">
            <div>{{ project.description }}</div>
          </v-card-text>

          <v-card-actions>
            <v-btn color="orange" text :href="project.github">
              Github Repo
            </v-btn>

            <v-btn color="orange" text :href="project.url">
              Live
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-row>
    </v-container>
  </section>
</template>

<script>
export default {
  name: "Projects",
  data() {
    return {
      projects: [
        {
          name: "Twitch24",
          github: "https://github.com/badbabykosh/twitch24",
          url: "https://twitchtv-81469.firebaseapp.com/",
          tech: "Javascript ES5, requireJS, Bootstrap",
          description:
            "Experimental app built with qunit, pure javascript, AMD module design and requireJS with Bootstrap. Launch it. Select you favorite channels and see when they are online.",
          image: "https://new-thefonso.vercel.app/img/portfolio/fullsize/twitch24.png",
        },
        {
          name: "Pomodoro",
          github: "https://github.com/badbabykosh/pomodoro",
          url: "http://pomodoro.s3-website-us-west-1.amazonaws.com/",
          tech: "React, Bootstrap",
          description:
            "Experimental application utilizing the D3 and jquery libraries and the Bootstrap framework. Launch it in a new window and play with it for fun. Take a look at the code on github",
          image: "https://new-thefonso.vercel.app/img/portfolio/fullsize/fonsodoro.png",
        },
        {
          name: "Cox Auto Prism",
          github: "",
          url: "https://prs-demo.netlify.com/",
          tech: "React, GraphQL, GatsbyJS, React-strap",
          description:
            "Production application built in React. It's purpose is to demo each React component built for the system. PRISM is a React component library style guide. The library is meant to harmonize look and feel across all cox auto properties.",
          image: "https://new-thefonso.vercel.app/img/portfolio/fullsize/prism_big.png",
        },
        {
          name: "3D Demo 1",
          github: "",
          url: "https://unclefonso-3d-demo-uecg.vercel.app/",
          tech: "React, Spline",
          description:
            "A design created in Figma and ported over to 3D and presented inside a React app for demo purposes.",
          image: "@/assets/images/figma3d.png",
        },
        {
          name: "Covid Tracker",
          github: "",
          url: "https://vue-covid-tracker-theta.vercel.app/",
          tech: "Vue 3, external API",
          description:
            "Experimental api consumer demo. An exercise to explore Vue 3 capabilities.",
          image: "@/assets/images/covid_tracker.png",
        },
      ],
    };
  },
};
</script>

<style scoped>
.project-section {
  background-color: #d8c593;
}
.v-image {
  border-bottom: #708160 1px solid;
}
</style>

Network tab shows: "GET http://localhost:8082/@/assets/images/figma3d.png 404 (Not Found)"

Answer 1

The image from the src folder will not be published automatically. You cannot simply reference a file in the src folder. However, there are several ways to overcome this.

Solution

Use the public folder. All content in every public folder will be included in your application, so if you move the assets folder there, you can refer to it as ./assets.

<img src="./assets/images/figma3d.png">

If this is a complex application, I suggest setting the root path so that references to every image or font, etc., will originate from the domain regardless of the current URL.

<base href="/">

More information

• Setting the root location with the <base> tag

Answer 2

Solution for Gridsome

https://gridsome.org/docs/images

While reading through the Gridsome documentation, I found information about referencing the src folder using the ~ symbol instead of the usual @.

Gridsome has a built-in component that outputs an optimized progressive image. It also resizes and crops in real-time when developing.

A typical image component will look like this:

<g-image src="~/image.png" width="500"/>

~ is an alias to /src/ folder.

Summary

Although there are currently active questions in the code repository regarding the solution, I leave this here just as an interesting note.

In Vue applications, statically stored images and others are always easily reusable.