Vue中＜img＞标签的 src 值全解析

更新时间：2025年05月14日 09:24:28 作者：BillKu

这篇文章主要介绍了Vue中＜img＞标签的 src 值全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

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

如果你使用的是网络图片（即图片的URL是完整的HTTP或HTTPS链接），可以直接指定 src 的值：

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

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

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

如果你使用的是本地图片（即图片存放在项目的 src/assets 或 public 目录中），直接指定 src 的值可能会导致图片无法正确加载。原因如下：

Vue CLI 项目默认会使用 Webpack 打包，而 Webpack 会将本地图片视为模块处理。
如果你直接写 src="./assets/your-image.jpg"，Webpack 不会正确解析路径，导致图片加载失败。

正确的做法：

你需要使用 require 或 import 来引入图片，这样 Webpack 会正确处理路径。

<template>
  <div>
    <img :src="imageUrl" alt="描述图片">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/your-image.jpg') // 使用 require 引入图片
    };
  }
};
</script>

或者使用 import：

<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 的值为绝对路径：

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

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

4. 动态绑定 src

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

<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 目录中，需要使用 require 或 import 引入。
- 如果图片在 public 目录中，可以直接指定 src 的值为绝对路径。
动态图片：使用 v-bind 动态绑定 src。

到此这篇关于在Vue中，＜img＞标签的 src 值的文章就介绍到这了,更多相关vue img标签src值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue为什么v-for的优先级比v-if高原理解析
这篇文章主要为大家介绍了vue为什么v-for的优先级比v-if高原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
这篇文章主要介绍了Vue实现Tab标签路由效果，并用Animate.css做转场动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
vue项目的html如何引进public里面的js文件
这篇文章主要介绍了vue项目的html如何引进public里面的js文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue3中keep-alive和vue-router的结合使用方式
这篇文章主要介绍了vue3中keep-alive和vue-router的结合使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
玩转vue的slot内容分发
这篇文章主要介绍了玩转vue的slot内容分发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue中实现父子组件双向数据流的三种方案分享
通常情况下,父子组件的通信都是单向的,或父组件使用props向子组件传递数据,或子组件使用emit函数向父组件传递数据,本文将尝试讲解Vue中常用的几种双向数据流的使用,需要的朋友可以参考下
2023-08-08
Vue3中事件总线mitt的使用方式
mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下
2025-03-03
vue项目实现面包屑导航
这篇文章主要为大家详细介绍了vue项目实现面包屑导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
基于vue打包后字体和图片资源失效问题的解决方法
下面小编就为大家分享一篇基于vue打包后字体和图片资源失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
浅析Vue 中的 render 函数
在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM，今天小编就通过本文给大家简单介绍下Vue 中 render 函数,需要的朋友可以参考下
2020-02-02