<img src="src/assets/logo.png" alt="Logo">为什么用原生的<img> 标签图片不展示只展示裂开的图片加图片名

在你的代码中，使用原生的 `<img>` 标签加载图片时出现“裂开”的图标和图片名称，通常是因为以下几个原因：

1. **路径问题**：图片路径不正确或文件不存在。
2. **资源未加载**：服务器没有正确配置，导致静态资源无法访问。
3. **权限问题**：浏览器或服务器对图片文件的访问权限设置不当。

### 解决方法

1. **检查图片路径**：
- 确保 `src` 属性中的路径是正确的。例如，如果你的项目结构如下：

     /src
     ├── assets
     │   └── logo.png
     └── components
         └── YourComponent.vue

那么你应该使用相对路径：

     <img src="./assets/logo.png" alt="Logo">

2. **检查 Webpack 配置**：
- 如果你使用的是 Vue CLI 或其他构建工具，确保 Webpack 配置正确处理了静态资源。通常情况下，Vue CLI 会自动处理这些路径，但你可以检查 `vue.config.js` 文件中的配置：

     module.exports = {
       publicPath: '/',
       outputDir: 'dist',
       assetsDir: 'assets',
       lintOnSave: process.env.NODE_ENV !== 'production'
     };

3. **检查服务器配置**：
- 确保你的开发服务器（如 `npm run serve`）或生产环境服务器正确地服务静态资源。例如，在 Vite 中，你可以检查 `vite.config.js` 文件：

     export default defineConfig({
       base: './',
       server: {
         open: true,
         port: 3000
       }
     });

4. **检查控制台错误**：
- 打开浏览器的开发者工具（通常按 F12），查看控制台是否有任何关于图片加载的错误信息。这可以帮助你确定问题的具体原因。

### 示例

假设你的项目结构如下：

/src
├── assets
│   └── logo.png
└── components
    └── Login.vue

在 `Login.vue` 中使用以下代码：

<template>
  <div class="login-container">
    <img src="./assets/logo.png" alt="Logo">
    <!-- 其他表单元素 -->
  </div>
</template>

<script>
// 其他脚本代码
</script>

<style scoped>
/* 样式代码 */
</style>

通过以上步骤，你应该能够解决图片不显示的问题。如果问题仍然存在，请提供更多详细信息以便进一步诊断。