vue引入图片报错?VueCli 关于静态资源(图片) 引入问题 | 您所在的位置:网站首页 › 1127520775_16225995440021n.jpg › vue引入图片报错?VueCli 关于静态资源(图片) 引入问题 |
文章目录
一、关于Vue-Cli图片引入问题?二、两种引入方式三、相对路径动态时如何使用?四、背景图片background-image如何渲染?
一、关于Vue-Cli图片引入问题?
首先我们要清楚Vue-cli是基于Webpack来进行的打包,其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。 简单的来说 一种是相对引入方式,一种是绝对引入方式 关于相对文件的话我们放到assets中,关于绝对文件的话我们去放到public文件中 此时我们都是采用的正常字符串引入格式,那么一旦我们如果想要写成动态属性呢? 我们可以尝试一下,先来看相对路径 我们可以看到如果我们将属性直接设置成了动态的话,那么这时,我们的图片将不会在起作用 其次我们可以看一下绝对路径
我们只需要更改vue.config.js中的publicPath即可 很简单,我们只需使用require进行引入即可,那么require的目的是什么呢?其实就是将图片转换成一个模块,我们需要知道的是,如果图片动态了,那么webpack就不会再去打包这个图片了,那么我们其实可以手动的将其转换成一个模块,这样webpack就可以解析认识了。 写在标签 style 中,相对路径(当然我们也可以写绝对路径)
|
CopyRight 2018-2019 实验室设备网 版权所有 |