vue引入图片的三种方式与背景图引入

最新推荐文章于 2024-10-04 19:16:05 发布

*初级小白*~

最新推荐文章于 2024-10-04 19:16:05 发布

阅读量5.1k

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ScumStudy/article/details/121313192

版权

本文详细介绍了在Vue.js项目中如何引入图片的三种常见方法，包括静态资源引用、require语法以及URL-loader结合file-loader的使用。同时，文章还探讨了如何将图片作为背景图设置在元素上，提供了具体的CSS样式示例。对于前端开发者在Vue项目中处理图片资源具有指导意义。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <img :src="imgSrc1" alt="">
    <img :src="imgSrc2" alt

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

*初级小白*~

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用Vue-cli 中为单独页面设置背景图片铺满全屏

10-15

在前端开发中，尤其是在使用Vue-cli创建的项目中，我们经常会遇到需要为某个页面设置全屏背景图片的需求。这个过程主要涉及到CSS样式的设置，以确保背景图片可以覆盖整个页面并且不会出现重复或拉伸失真的情况。下面...

解决vue打包css文件中背景图片的路径问题

10-18

在Vue项目开发过程中，常常会遇到打包后css中背景图片路径出现错误，导致在生产环境中无法正确加载图片的问题。本文将详细探讨这一问题，并分享解决方案。首先，需要明确背景图片路径错误的常见原因。在开发环境下...

参与评论您还未登录，请先登录后发表或查看评论

vue.js div 设置背景图片

hhbbeijing的专栏

08-10

2万+

布局： <div class="middle" :style="backgroundDiv"> <img src="./images/aibtn@3x.png" style="width: auto; height: 40px;"> </div> 数据： data() { return { backgr

Vue 引入图片的几种方式

weixin_43796856的博客

03-11

5098

引入背景图片错误分析：使用vue添加背景图片时，刚开始是加在css样式上，然后路径也没错，但是浏览器上会把图片路径转成base64，但是图片大小超过阈值就不转了，直接引入背景图片用在浏览器上时,由于路径解析的问题,图片并不能够正确的显示出来。可以使用以下几种方式 <div style="width:100px;height:100px; backgroundImage:url('../...

vue3导入本地图片2种实现方法

最新发布

weixin_54514048的博客

10-04

1027

【代码】vue3导入本地图片2种实现方法。

Vue项目中设置背景图片方法

08-28

下面小编就为大家分享一篇Vue项目中设置背景图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue引入背景图片

qq_37669507的博客

07-30

9005

:style="backgroundDiv" 在return中 backgroundDiv: { backgroundImage: 'url(' + require('../../static/images/1.png') + ')', backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%' }

vue项目中加入图片和背景图：img、background-image

m0_72822997的博客

02-21

4501

vue引入图片的方式

weixin_45765215的博客

12-11

1149

在 vue 项目中，常用的引入图片的方式有 4 种。

vue 背景图引入

11-13

2万+

｀｀｀ import Img from '@/da.jpg'export default { data () { return { img: Img, } } } .img1{ width: 100px; height: 100px;

vue css 引入asstes中的图片无法显示的四种解决方法

11-21

对于新项目或图片资源不多的情况，可以改变图片引入方式。在Vue组件中，可以使用`import`导入图片，然后将其存入`data`对象，再绑定到`src`属性上。例如： ```javascript import logo from "../assets/logo.png";...

解决vuejs项目里css引用背景图片不能显示的问题

10-18

今天小编就为大家分享一篇解决vuejs项目里css引用背景图片不能显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue引入图片和背景图

liuguochao1024的博客

09-25

7753

1，引入图片，在img元素中用：src绑定地址的 2，直接在样式中引用的

Vue.js中的图片引用路径

热门推荐

卜小娴的博客

07-27

3万+

当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形：使用一我们在data里面定义好图片路径imgUrl:'../assets/logo.png'然后，在template模板里面/*错误写法*/ <img src="{{imgUrl}}">这样是错误的写法，我们应该用v-bind绑定图片的srcs属性<img :src="imgUrl">或者<img src="../assets/log

VUE中图片和背景图引用（img和background-image）

scry丶坏坏的博客

04-03

1万+

vue中图片和背景图引用（img和background-image）一、背景图引入 1.第一种方式 <div class="bgimg"></div> .bgimg{ width: 150px; height: 60px; /*以下两种路径方式都可以*/ /*background-image: url('../../../../asset...

vue引用背景图片方法

weixin_43789753的博客

08-11

711

VUE—引入背景图片（图文详情）

Poppy_LYT的博客

08-04

3978

VUE—引入背景图片 background: url("../../assets/img/my_right.jpg") no-repeat right center; 我的文件夹位置 …/从当前文件出去到了my 再…/是从my出去到了src 所以…/…/assets是src下的assets文件夹 ...

Vue设置背景图片

m0_62458145的博客

02-05

4913

这个style的内容写在data中。一定是要加require包裹路径。只需要在外层div中加入。第二种:在style里。

vue3 class引入背景图片

09-07

在 Vue 3 中，你可以通过类的方式引入背景图片。以下是一个示例： 1. 首先，创建一个 CSS 文件，比如 `styles.css`，并在其中定义一个类来设置背景图片样式： ```css .background-image { background-image: url(路径/到/你的/背景图片.jpg); /* 其他背景图片的样式设置，比如背景大小、重复等 */ } ``` 2. 在组件中，使用 `import` 导入该 CSS 文件： ```javascript import '@/path/to/styles.css'; ``` 3. 在你的 Vue 组件的 `<template>` 中，使用该类来设置背景图片样式： ```vue <template> <div class="background-image">  </div> </template> ``` 确保将路径替换为你实际的背景图片路径。这样，你就可以使用类来引入背景图片了。