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)"
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.
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="/">