在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

相关推荐
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
没有鸡汤吃不下饭1 小时前
解决vite+vue3运行项目打开页面跳转很慢打不开需要刷新问题:optimized dependencies change. reloading
前端·vue.js·vite
兜小糖的小秃毛2 小时前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
J总裁的小芒果2 小时前
el-table 自定义列、自定义数据
前端·javascript·vue.js
爱的叹息6 小时前
Vue 2 和 Vue 3 中 Vue 实例变量方法的功能差异对比,包含关键方法的详细说明和表格总结
前端·javascript·vue.js
肠胃炎6 小时前
Vue:mixin详解
前端·javascript·vue.js
北溟鱼鱼鱼6 小时前
组件通信方案总结
vue.js
前端大白话6 小时前
Vue3开发老踩坑?10个实战技巧助你突围
前端·javascript·vue.js
秋天的一阵风6 小时前
Webpack 插件开发:为 Vue.js 应用实现图片预加载
前端·vue.js·webpack
拖孩8 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js