vue背景图片资源加载问题
主要问题:通过img的src加载图片可以加载出来,但是通过css用图片做背景时发现加载不出来问题代码:<template><div id="app"><!--无法加载--><!--<div style="background:url('./assets/fl
·
主要问题:
通过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
更多推荐
已为社区贡献2条内容
所有评论(0)