在Vue中,<img> 标签的 src 值

1. 直接指定 src 的值(适用于网络图片)

如果你使用的是网络图片(即图片的URL是完整的HTTP或HTTPS链接),可以直接指定 src 的值:

vue

复制

复制代码
<template>
  <div>
    <img src="https://example.com/your-image.jpg" alt="描述图片">
  </div>
</template>

这种方式非常简单,适用于图片已经托管在网络上。


2. 直接指定 src 的值(适用于本地图片)

如果你使用的是本地图片(即图片存放在项目的 src/assetspublic 目录中),直接指定 src 的值可能会导致图片无法正确加载。原因如下:

  • Vue CLI 项目默认会使用 Webpack 打包,而 Webpack 会将本地图片视为模块处理。

  • 如果你直接写 src="./assets/your-image.jpg",Webpack 不会正确解析路径,导致图片加载失败。

正确的做法:

你需要使用 requireimport 来引入图片,这样 Webpack 会正确处理路径。

vue

复制

复制代码
<template>
  <div>
    <img :src="imageUrl" alt="描述图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/your-image.jpg') // 使用 require 引入图片
    };
  }
};
</script>

或者使用 import

vue

复制

复制代码
<template>
  <div>
    <img :src="imageUrl" alt="描述图片">
  </div>
</template>

<script>
import imageUrl from '@/assets/your-image.jpg'; // 使用 import 引入图片

export default {
  data() {
    return {
      imageUrl
    };
  }
};
</script>

3. 将图片放在 public 目录

如果你不想通过 Webpack 处理图片,可以将图片放在 public 目录中。public 目录中的文件不会被 Webpack 处理,而是直接复制到打包后的 dist 目录中。

  • 将图片放在 public/images/your-image.jpg

  • 直接指定 src 的值为绝对路径:

vue

复制

复制代码
<template>
  <div>
    <img src="/images/your-image.jpg" alt="描述图片">
  </div>
</template>

这种方式适合静态图片,且图片路径不会动态变化。


4. 动态绑定 src

如果你需要动态绑定图片路径(例如根据用户输入或条件切换图片),可以使用 v-bind(或简写为 :)动态绑定 src

vue

复制

复制代码
<template>
  <div>
    <img :src="imageUrl" alt="描述图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 初始为空
    };
  },
  mounted() {
    // 动态设置图片路径
    this.imageUrl = require('@/assets/your-image.jpg');
  }
};
</script>

总结

  • 网络图片 :可以直接指定 src 的值。

  • 本地图片

    • 如果图片在 src/assets 目录中,需要使用 requireimport 引入。

    • 如果图片在 public 目录中,可以直接指定 src 的值为绝对路径。

  • 动态图片 :使用 v-bind 动态绑定 src

相关推荐
晨枫阳13 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技15 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte15 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin15 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击15 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder16 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202616 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737416 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星18 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin18 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序