vue动态加载图片资源

vue动态加载图片

首先 动态的拼接url相对地址或者字符串变量形式的引入并不会生效,webpack的file-loader不会去处理,只会将它当成简单的文本进行替换

<img :src="src">

//data中定义变量src
data() {
  return {
    src: '../images/demo.png' 
  }
}

解决方法:

• 将图片转为base64格式,适用于体积比较小的图片

• 使用import引入图片

  <img :src="src">
  
  //使用import引入
  import img from '../images/demo.png'
  
  //data中定义变量src
  data() {
    return {
      src: img 
    }
  }
  

• 使用require进行动态加载 — require是在运行时加载，而import是编译时加载；

• 引入publicPath

  当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。

  在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

  用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。

  当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀，publicPath 是部署应用包时的基本 URL，需要在 vue.config.js 中进行配置。

补充一下file-loader url-loader,

首先,webpack打包后,我们的相对路径就有可能不符合打包后的目录结构,因为路径会变成相对于index.html的而非开发时的相应文件的,此时file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。,但是,如果图片比较多,就会使太多的图片资源请求,降低页面性能,此时 url-loader可以解决,它可以将图片转为dataUrl,这样图片资源也将一起被打包,降低请求次数,同时它还可以设置limit参数,来决定需要转换图片最大体积,因为体积越大转码越耗时,大于limit还是还是直接使用file-loader. url 封装了 file, webpack5 这两个都被弃用了 统一由asset处理