Vue项目中实现添加自定义图片Logo的详细步骤解析

一、准备工作

1.1 准备Logo图片

1.2 图片尺寸调整

二、替换浏览器默认Logo

2.1 将图片放置在项目目录

2.2 修改index.html

打开Vue项目根目录下的index.html文件，找到与favicon相关的<link>标签。如果没有，可以手动添加如下代码：

<link rel="shortcut icon" type="image/x-icon" href="/public/custom-logo.png">

三、在Vue组件中使用自定义Logo

3.1 引入图片

<template>
  <div>
    <img src="@/assets/custom-logo.png" alt="Custom Logo">
  </div>
</template>

3.2 使用Vue CLI配置路径别名

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
};

四、在ElementUI的Input输入框中添加自定义图片

4.1 修改模板

<template>
  <el-input
    v-model="inputUser"
    class="input"
    size="large"
    placeholder="账户"
  >
    <template #suffix>
      <div class="suffix">
        <img src="@/assets/image/user.svg" alt="">
      </div>
    </template>
  </el-input>
</template>

4.2 添加样式

.input .el-input__wrapper {
  padding: 0.1vh 1.5vh 0.1vh 3.5vh;
}
.input .el-input__inner {
  padding-left: 2vh !important;
}
.suffix {
  float: left;
  position: absolute;
  left: 0;
}

五、在Vue3中渲染后端返回的图片字段

5.1 处理图片URL

<template>
  <div>
    <img :src="imageUrl" alt="Backend Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

5.2 处理图片ID

<template>
  <div>
    <img :src="getImageUrl(imageId)" alt="Backend Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageId: '12345'
    };
  },
  methods: {
    getImageUrl(id) {
      return `https://example.com/images/${id}.jpg`;
    }
  }
};
</script>

六、在表格中放置图片

6.1 使用UI组件库

<template>
  <a-table :columns="columns" :data="data">
    <template #image="{ record }">
      <img :src="record.imageUrl" alt="Image" width="50" height="50">
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Image',
          dataIndex: 'imageUrl',
          slots: { customRender: 'image' }
        },
        // 其他列配置
      ],
      data: [
        { imageUrl: 'https://example.com/image1.jpg' },
        { imageUrl: 'https://example.com/image2.jpg' }
      ]
    };
  }
};
</script>

七、总结