vue引入图片报错？VueCli 关于静态资源(图片) 引入问题

一、关于Vue-Cli图片引入问题？

首先我们要清楚Vue-cli是基于Webpack来进行的打包，其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。

二、两种引入方式

简单的来说

一种是相对引入方式，一种是绝对引入方式

• 相对引入：

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

• 绝对引入：

  <img src="/images/logo.png" alt="" /> <!-- /单杠引入会去找public文件夹 -->

关于相对文件的话我们放到assets中，关于绝对文件的话我们去放到public文件中

此时我们都是采用的正常字符串引入格式，那么一旦我们如果想要写成动态属性呢？

我们可以尝试一下，先来看相对路径

  <img src="../assets/logo.png" alt="" />  <!-- 成功 -->
  <img :src="'../assets/logo.png'" alt="" /> <!-- 失败 -->
  <img :src="'@/assets/logo.png'" alt="" /> <!-- 失败 -->
  <img :src="relative" alt=""> <!-- 失败 -->

我们可以看到如果我们将属性直接设置成了动态的话，那么这时，我们的图片将不会在起作用

首先原因是什么呢？
我们使用: 动态属性，而此时的webpack里面带的插件就不会再去处理、解析当前这个图片img

其次我们可以看一下绝对路径

  <img src="/images/go.jpg" alt=""> <!-- 成功 -->
  <img :src="'/images/go.jpg'" alt=""> <!-- 成功 -->
  <img :src="url" alt=""> <!-- 成功 -->
  <img :src="absolute" alt=""> <!-- 成功 -->

此时几种写法全部都可以实现效果
简单的概括来说 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack，那么不经过webpack的话使用绝对路径那么肯定在项目打包之后是可以找到的，但是此时我们需要考虑一个问题如果我们打包后的文件并没有放置在对应的/目录下的话，需要怎么处理呢？

我们只需要更改vue.config.js中的publicPath即可

当然不要忘记的是 同时我们在引入文件时就不能单单只写/了，需要将静态路径写全。

三、相对路径动态时如何使用？

很简单，我们只需使用require进行引入即可，那么require的目的是什么呢？其实就是将图片转换成一个模块，我们需要知道的是，如果图片动态了，那么webpack就不会再去打包这个图片了，那么我们其实可以手动的将其转换成一个模块，这样webpack就可以解析认识了。

其实我们可以看到最终webpack识别的也同样是require的这样一个写法。

   <img :src="require('@/assets/logo.png')" alt="" /> <!-- 成功 -->

四、背景图片background-image如何渲染？

写在标签 style 中,相对路径（当然我们也可以写绝对路径）

<div class="body1" :style="'background-image:'+'url('+require('../assets/logo.png')+')'">

写在css样式中,绝对路径（我们就需要将文件放置在public中了）