在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

相关推荐
清风絮柳18 分钟前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维18 分钟前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
桂月二二4 小时前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
_未知_开摆6 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
喝拿铁写前端6 小时前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
lvbb667 小时前
框架修改思路
前端·javascript·vue.js
qq_456001657 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业7 小时前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
FanetheDivine7 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js