vue中引入图片的方法

这篇具有很好参考价值的文章主要介绍了vue中引入图片的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、图片放在/public目录下


<!-- img标签引入图片:图片名称,这种属于相对路径,在index.html的同级目录下查找此图片 -->

<img src="login-bg.png">

<!-- img标签引入图片:'/' + 图片名称,这种属于绝对路径,/表示编译后的dist文件夹 -->

<img src="/login-bg.png">

<!-- style样式引入图片时,需要用url来处理图片路径,url内部写法和img的src相同 -->

<div style="background-image: url('login-bg.png');"></div>

<div style="background-image: url('/login-bg.png');"></div>

二、图片在/src/assets目录下

此时需要使用相对路径来引用
我们先看一下@是否配置为了src目录,查看vue.config.js

configureWebpack: {
	resolve: {
        alias: {
          '@': resolve('src'),
        },
      }
}

方法1:在vue中设置一个变量来引入

data () {
	img: require('@/assets/images/img.jpg')
}

然后直接在img中使用

<img :src="img">

方法2:在css样式中引用文章来源地址https://www.toymoban.com/news/detail-461136.html

<div class="img-class"></div>

<style scoped>
.img-class {
	background-image: url('~@/assets/img/img.png')
}
</style>

到了这里,关于vue中引入图片的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Vue中动态引入图片为什么要用require

    静态资源和动态资源 静态资源 动态的添加src 动态资源 我们通过网络请求从后端获取的资源 动态的添加src会被当成静态资源 动态的添加src最终会被打包成: 动态的添加图片最会会被编译成一个静态的字符串,然后再浏览器运行中会去项目中查找这个资源, 静态资源编译 默

    2024年02月13日
    浏览(49)
  • 分享html网页引入svg图片的4种方法

    本文主要介绍了html网页引入svg图片的4种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧 web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签

    2024年02月09日
    浏览(41)
  • 解决在vue中img标签不显示图片的问题

    在vue中, 经常会遇到img标签不展示的问题, 本人遇到两种, 都是因为webpack打包, 导致找不到路径, 所以不现实, 总结几个可以解决本地图片路径显示不出来的问题: 1.把图片放在src同级的static文件夹下。 2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接去展示。 3.图片放在

    2024年02月13日
    浏览(35)
  • 解决react,<img>src使用require方法引入图片不显示问题

    解决方法: 再导入的图片后加.default即可 img src={require(\\\'../../images/bg.png\\\').default} alt=\\\"\\\" /   推荐阅读:https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html

    2024年02月15日
    浏览(44)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(42)
  • Vue3 —— 在vue中动态引入组件以及动态引入js的方法

    文章目录 一 、 动态引入组件 1. 具体写法 二、 动态引入js文件 1. 具体写法 总结 定义一个异步组件,它在运行时是懒加载的。参数可以是一个异步加载函数,或是对加载行为进行更具体定制的一个选项对象。 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时

    2024年02月12日
    浏览(50)
  • 怎么修改svg的颜色? img引入svg图片怎么修改颜色的三种方法

    效果图 此时css对svg文件无法生效,此时要用到CSS3滤镜filter中的drop-shadow,通过生产一个可指定颜色的阴影放置于svg的位置,并将原始svg移出视线 效果图 如果项目中用到svg比较多,前两种方法会比较啰嗦,每次写一遍方法二的样式比较麻烦,这时可以考虑封装组件, 结合实际需要

    2024年02月11日
    浏览(53)
  • webpack安装和使用及超详细配置一个基本vue项目的全部流程(包括路由、less、引入图片渲染)

    webpack官网: https://webpack.docschina.org/concepts/ 一:搭建一个简单的webpack项目 1:准备工作 需要在node环境才能使用webpack,所以需要先安装node,安装node请自行百度。dddd 如图,我这里使用的是14.17.0版本的 2:初始化项目 首先创建一个文件夹,这里我的命名是myWebpack,然后使用n

    2024年02月02日
    浏览(41)
  • vue引入组件的几种方法

    目录 一、常用的局部引入 二、创建一个js 进行统一注册   然后在main.js引入统一管理的js文件实现全局注册 三、自动注册全局引入 总结: 在哪个页面需要就在那个页面 引入 、 注册 、 使用 1、global.js统一注册管理: 2、在main.js中引入 global.js实现全局注册 优点: 减少每个

    2024年02月16日
    浏览(41)
  • 【Python】matplotlib设置图片边缘距离和plt.lengend图例放在图像的外侧

    我有这样一串代码: 我们得到的图像为: loc :图例位置,可取(‘best’, ‘upper right’, ‘upper left’, ‘lower left’, ‘lower right’, ‘right’, ‘center left’, ‘center , right’, ‘lower center’, ‘upper center’, ‘center’) ;若是使用了bbox_to_anchor,则这项就无效了; fontsize :int或flo

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包