主要问题:
通过img的src加载图片可以加载出来,但是通过css用图片做背景时发现加载不出来
问题代码:

<template>
  <div id="app">
    <!--无法加载-->
    <!--<div style="background:url('./assets/flower.jpg'); height:200px; width:200px">-->
     <!--解决方法-->
    <div :style="{background:url_back_img}">
      xxxx
    </div>
    <img src="./assets/logo.png"/>
    <img :src="back_img">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      back_img: require('./assets/logo.png'),
      url_back_img: "url("+require('./assets/flower.jpg')+")"
    }
  }
}
</script>

主要原因是编译后目录结构改变导致,我用了个粗暴的方法,直接require(“图片路径”),通过这种方式来直接加载图片。

网上搜了下通过分析vue编译过程来分析解决方法的,可以通过修改配置来实现。
下面这个博客详细分析各种情况下会出现的问题和产生的原因,并通过修改配置来解决相应问题。
具体参考:https://segmentfault.com/a/1190000012135787

Logo

前往低代码交流专区

更多推荐