vue中不同情况下的引入图片的方式

ncj393437906

已于 2022-08-25 11:52:36 修改

阅读量324

点赞数

分类专栏： Vue2 文章标签： vue

于 2021-01-21 09:19:24 首次发布

本文链接：https://blog.youkuaiyun.com/ncj393437906/article/details/112916135

版权

Vue2 专栏收录该内容

13 篇文章

订阅专栏

这篇博客内容涉及HTML中<img>标签的两种不同路径引用方式，以及<div>元素通过内联样式设置背景图片的方法。同时展示了如何在Vue.js的数据绑定中使用图片路径，并在CSS中静态引入图片作为背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img :src="require('@/assets/images/logo.png')" />
<img src="~@/assets/images/logo.png">

<div class="banner" :style="{ backgroundImage: `url(${imgurl})` }" />

data() {
  return {
	imgUrl: require('@/assets/images/product/data-management/banner.png')
  }
}

.box {
  background-image: url('~@/assets/images/product/fy-security/bottom-bg.jpg');
}