vue图片、背景图片路径问题

vue图片、背景图片路径问题

vue中引入图片经常会出现路径问题，在此记录一下：

1.组件中 <img> 引用图片

<img src="../assets/img/logo.png" >

2.app.vue <style>中引入图片

 body {background: url(‘../static/img/back5.jpg‘);}

3.组件行间样式引入背景图片

 <div style="background-image:url(’static/img/1.jpg‘)">

行间动态引入背景图片

 <div :style="‘background-image:url(\‘static/img/‘+btnscard.back+‘\‘)‘">

原文地址：https://www.cnblogs.com/s313139232/p/9007228.html

时间： 2024-11-10 15:07:04

vue图片、背景图片路径问题的相关文章

vue 动态绑定背景图片

html <div class="racetm" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}"> </div> 画重点 backgroundSize:'100% 100%' 背景图片大小必须这么写 x轴 y轴

可设置背景图片的JPanel

package com.sot.he.upload; import java.awt.Graphics; import java.awt.Image; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import javax.imageio.ImageIO; import javax.swing.JPanel; /** * 可设置背景图片的JPane

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

资源相对引用路径问题描述一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径. 解决办法打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图. 那么这样后,资源的引用路径就正确了. 当然在config文件夹下的index.js中修改 assetsPubl

jQuery获取和设置disabled属性、背景图片路径

之前对于这个独特的disabled属性获取和设置很混乱,今天项目中用到了,用attr不能实现,于是多次试验得出: 获取disabled属性用prop $("#basic_key").prop("disabled") 以上会返回true或false. 然后设置disabled是attr,重点是后面的一个参数不加引号: $("#basic_key").attr("disabled",'false') //false加引号是错误的~

vue项目中设置背景图片

在vue项目开发中,我们经常会碰到动态添加背景图片的问题,可是当我们在样式中添加了背景图片后,背景图片并不能正常的显示出来,如下css样式这个时候就要考虑使用其它方式了,node中提供了一种有效的方式来解决这个问题就是require 通过行内样式引入就可以解决背景图片不显示的问题了

相对路径错误导致背景图片不能显示

昨天写样式的时候,给右边菜单栏设置背景图片,一直没有显示,逐步排除了其他元素干扰,怀疑是路径问题,但是之前也这么写过显示正常,去firebug里面去查看,提示“载入路径失败” background:url(images/navbg.png) no-repeat; 浏览器中显示效果如下 background:url(../images/navbg.png) no-repeat; 浏览器中显示效果如下

vue的 v-for 循环中图片加载路径问题

先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

Vue 动态图片加载路径问题和解决方法

最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面是核心组件代码: <el-tree :data="data" class="tree-view" node-key="id" :props="defaultProps" @node-click="click&quo