vue中img或元素背景图片无法显示或路径错误的解决

目录
  • img或元素背景图片无法显示或路径错误
  • 背景图片打包后出现的路径引用错误问题

img或元素背景图片无法显示或路径错误

1.在给vue中img元素动态绑定图片路径时会显示不出来图片：

<span>普通:</span><img src="./video.png" alt="" srcset="">
<span>动态绑定:</span><img :src="'./video.png'" alt="" srcset="">

2.解决方案：使用require或import：

<span>require1:</span><img :src="require('./video.png')">
<span>require2:</span><img :src="img1">
<span>import:</span><img :src="img2">
import img1 from './video.png'
export default {
  data() {
    return {
        img1: img1,
        img2: require('./video.png')
    }
  }
}

3.同理给元素绑定背景图片也是使用这种方式：

<i :style="`background-image: url( ${require('./video.png')} )`"></i>

背景图片打包后出现的路径引用错误问题

在本地写好的页面，测试展示效果都是正常的，经过 打包后，背景图片不展示，经过排查后，发现是引用路径有问题。

<div :style="logo"></div>
data(){
    return{
        logo: {
            backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景图片
            backgroundRepeat: "no-repeat", 
            backgroundSize: "50% 100%",
            backgroundPosition: "center",
      },
    }
}

修改后，在经过打包部署，背景图片就可以正常显示了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue页面图片不显示问题解决方案

    vue页面图片不显示问题解决方案

    在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点preview里面又什么都没有,后面一输入,发现随便输入什么字都是出现的200 解决办法: 在webpack里面配置静态资源的路径 1.找到vue.config.js 2.在module.exports下面的devServer里面添加一个键 contentBase:path.join(_dirname,'s

  • vue背景图片路径问题及解决

    vue背景图片路径问题及解决

    目录 vue背景图片路径 vue避坑之背景图片路径的添加 vue背景图片路径 共三种情况: <div class="about" :style="{backgroundImage:'url('+pic+')'}"> <div style="display: inline-block;width:36px;height: 36px;background-size: cover;background-position: center;bord

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • 解决在vue项目中,发版之后,背景图片报错,路径不对的问题

    解决方法: 在utils.js里边的 加上publicPath:'../../', 在引入图片或者背景图的时候,使用方法: 以上这篇解决在vue项目中,发版之后,背景图片报错,路径不对的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 关于Vue背景图打包之后访问路径错误问题的解决 vue-cli中打包图片路径错误的解决方法 关于vue.js发布后路径引用的问题解决 vue cli使用绝对路径引用图片问题的解决 详解vue-cil和webp

  • vue中img或元素背景图片无法显示或路径错误的解决

    vue中img或元素背景图片无法显示或路径错误的解决

    目录 img或元素背景图片无法显示或路径错误 背景图片打包后出现的路径引用错误问题 img或元素背景图片无法显示或路径错误 1.在给vue中img元素动态绑定图片路径时会显示不出来图片: <span>普通:</span><img src="./video.png" alt="" srcset=""> <span>动态绑定:</span><img :src="'./vide

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

    啥也不说了,大家还是直接看代码吧~ <template> <div id="logo"> </div> </template> <script> import meadiaurl from '../../api/mediaurl' export default { name: "logo" </script> <style scoped> #logo{ background: url

  • 关于Vue中img动态拼接src图片地址的问题

    下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源 例如:根据后端返回k1标记,前端生成assets/images/inventory/k1.png图片资源路径 <template> <div class="fl"> <img :src="getImgUrl(gatherInfo.img1)" alt=""> <img :src="

  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box

  • Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快.这里记录一下来提醒自己.消息滚动的代码在最下面,方便下次使用. 问题背景: 最近在做一个需求,组件A获取消息采用的是轮询,组件A获取到新的消息后,将组件A中的消息传递给另外一个组件B,当组件B接收到消息时就让消息在页面上滚动播放. 实现思路: 这个项目应用的框架为VUE,当组件A获取到新的消息之后,就触发中央事件总线,在组件B中进行事件监听,将其添加进入一个数组,当判断定

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

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

    解决:build->utils.js里,修改:增加 publicPath:'../../', if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath:'../../', fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } 以上这篇解决vuejs项目里css引用背景图片

  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    目录 前言 一.安装npm 依赖 二.引入组件 1.html中使用组件 单页 2.数据处理 单页 三.项目使用--代码部分 四.报错解决 总结 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist 一.安装npm 依赖 1.在根目录下输入一下命令 npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save 2.修改pacakge.json文件 "depende

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

随机推荐