为什么我的图片无法在网页上正常显示？

Question

所以现在我正在尝试为我和几个朋友制作一个网站的员工页面。现在我遇到一个问题，员工页面上的图像无法正确显示。我的组件文件夹与资产文件夹位于同一层，但这是唯一不显示图像的文件。我的staffdata.vue文件如下：

<!--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>

感谢任何帮助，我已经为此花了一个小时了。

Answer 1

此问题是由于图像路径而发生的。

例如，

../assets/images/qilin.png

：该路径是根据

staffdata.vue

文件计算出的图像路径。

但是文件渲染后，图像路径是从公共文件夹计算出来的。

因此，要解决此问题，您可以将资产文件夹移动到公共文件夹并从图像网址中删除

../

。 像这样：

assets/images/gilin.png

希望能帮到你。