css 为什么我的图片不能在我的网页上正常显示?

b1uwtaje  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(130)

所以现在我正试图为我和几个朋友的网站制作一个员工页面。现在我遇到了一个问题,我在员工页面上的图像无法正常显示。我的组件文件夹与我的资产文件夹在同一层上,但这是唯一一个没有显示图像的文件。我的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>

字符串


的数据
任何帮助都很感激,我已经做了一个小时了。

fafcakar

fafcakar1#

此问题是由于图像的路径而发生的。
例如,../assets/images/qilin.png:此路径是从staffdata.vue文件计算的图像路径。
但文件渲染后,图像路径从公共文件夹计算。
所以,为了解决这个问题,你可以将assets文件夹移动到公共文件夹,并从图片url中删除../。像这样:assets/images/gilin.png
希望能帮到你。

相关问题