前端src中图片img标签资源的几种写法？

梦里梦外; 2024-04-29 00:38 160阅读 0赞

在 Vue 项目中引用图片路径有几种不同的方法，具体取决于你的项目结构和配置。以下是几种常见的方式：

#### 1. 静态资源目录 (Public) ####

如果你的图片放在了项目的 `public` 目录下（例如，Vite 和 Create Vue App 脚手架工具通常使用这个目录），你可以直接通过相对于项目根目录的路径引用它。假设你有一个图片文件 `image.jpg` 放在 `public/images` 目录下，你可以这样引用它：

在这种情况下，图片的路径是从服务器的根目录开始的，不受 Vue 路由的影响。

#### 2. 作为模块导入 ####

如果你的图片作为模块资源放在了例如 `src/assets` 目录中，你可以使用 `import` 语法将图片导入到你的组件中，并使用一个变量来引用它。这种方法的好处是你可以利用 Vue 和 Webpack 的资源处理能力，例如路径解析、优化和缓存。

<template>
      <div>
        <img :src="imageUrl" alt="description">
      </div>
    </template>
    
    <script setup>
    import imageUrl from '@/assets/image.jpg';
    </script>

#### 3. 动态路径 ####

如果图片的路径需要动态生成（例如，基于某些计算或条件），你可以使用 Vue 的数据绑定功能：

<template>
      <div>
        <img :src="dynamicImageUrl" alt="description">
      </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    
    const imageName = 'image.jpg'; // 这个值可以动态更改
    const dynamicImageUrl = ref(`/path/to/images/${imageName}`);
    </script>

在这里，`:src` 是 Vue 中的绑定语法，它告诉 Vue 将 `img` 的 `src` 属性绑定到 `dynamicImageUrl` 变量的值上。这个变量可以是一个静态的字符串，也可以是一个计算属性或者函数返回的值，允许动态更改图片源。

#### 注意 ####

*  确保你使用的路径正确指向了你的图片文件。
 *  如果你使用的是 Vue CLI、Vite 或其他现代前端开发工具，它们可能会在构建过程中处理静态资源，例如修改文件名以支持缓存。因此，直接在代码中引用静态资源时，遵循上述建议可以确保资源被正确处理和引用。  
    ![在这里插入图片描述][b1ac5837305e451ca19b2a2a1be78e51.gif_pic_center]

[b1ac5837305e451ca19b2a2a1be78e51.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/9e3927c7e8484bc5ba35f3b6eeccae4b.gif