Why are my images not displaying properly on my web page?

January 6, 2024

So right now I am trying to make a staff page for a website for me and a few friends. Right now I am having an issue where my images on the staff page are not being shown properly. My components folder is on the same layer as my assets folder, but this is the only file where images aren’t showing. my staffdata.vue file is as follows:


<!--staffdata.vue-->
  <template>
    <div class="staff">
      <h1>Meet Our Staff</h1>
      <div class="staff-list">
        <div v-for="staffMember in staffMembers" :key="staffMember.id" class="staff-member">
          <img :src="staffMember.image" alt="Staff Image" class="staff-image" />
          <div class="staff-details">
            <h2>{{ staffMember.name }}</h2>
            <p class="position">{{ staffMember.position }}</p>
            <p class="bio">{{ staffMember.bio }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        staffMembers: [
          {
            id: 0,
            name: 'L4w1i3t',
            position: 'Site Developer/Admin',
            bio: 'place',
            image: '../assets/images/lawliet'
          },
          {
            id: 1,
            name: 'TuneEternal',
            position: 'Content Creator',
            bio: 'place',
            image: '../assets/images/xavier.png'
          },
          {
            id: 2,
            name: 'JayQilin',
            position: 'Content Creator',
            bio: 'place',
            image: '../assets/images/qilin.png'
          },
          {
            id: 3,
            name: 'Savage Sentral',
            position: 'Content Creator',
            bio: 'place',
            image: '../assets/images/savage.png'
          },
          {
            id: 4,
            name: 'IrisCandy',
            position: 'Artist',
            bio: 'place',
            image: '../assets/images/iris.png'
          },
          {
            id: 5,
            name: 'Matsuda Akai',
            position: 'Mascot',
            bio: 'place',
            image: '/assets/images/red.png'
          },
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .staff {
    text-align: center;
    padding: 20px;
  }
  
  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .staff-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
  }
  
  .staff-member {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.staff-image {
  /* Remove the predefined width and height */
  /* width: 150px; 
  height: 150px; */

  border-radius: 50%;
  margin-right: 20px;
  object-fit: contain; /* Display the image in its original dimensions */
}

.staff-details {
  margin-top: 20px;
  text-align: left;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.position {
  font-style: italic;
  color: #555;
  margin-bottom: 5px;
}

.bio {
  color: #333;
}
  </style>