hogwarts-ui 官方网站

Appearance

Image 异常图片 ​

基础用法-404页面 ​

点击查看示例代码
vue
<template>
  <h-image-v2 :h_data="h_data"></h-image-v2>
</template>

<script setup>
const h_data = {
  component: 'h-image-v2',
  image: 'https://ceshiren.com/uploads/default/optimized/3X/c/8/c87db9533ec8e4783b53c7f22d020a6757963739_2_800x450.jpeg',
  link:'https://www.baidu.com/',
}
</script>
<template>
  <h-image-v2 :h_data="h_data"></h-image-v2>
</template>

<script setup>
const h_data = {
  component: 'h-image-v2',
  image: 'https://ceshiren.com/uploads/default/optimized/3X/c/8/c87db9533ec8e4783b53c7f22d020a6757963739_2_800x450.jpeg',
  link:'https://www.baidu.com/',
}
</script>

基础用法-401页面 ​

点击查看示例代码
vue
<template>
  <h-image-v2 :h_data="h_data1"></h-image-v2>
</template>

<script setup>
const h_data1 = {
  component: 'h-image-v2',
  image: 'https://ceshiren.com/uploads/default/original/3X/3/b/3b36d698986bb51f3ae24d3ee2d3c9c0cb196c5d.png',
  link:'https://www.baidu.com/',
}
</script>
<template>
  <h-image-v2 :h_data="h_data1"></h-image-v2>
</template>

<script setup>
const h_data1 = {
  component: 'h-image-v2',
  image: 'https://ceshiren.com/uploads/default/original/3X/3/b/3b36d698986bb51f3ae24d3ee2d3c9c0cb196c5d.png',
  link:'https://www.baidu.com/',
}
</script>