在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

相关推荐
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化