vue-cli3+ 打包部署到服务器后，svg/jpg/png在iphone上无法正常显示 -- 工作笔记

原创

于 2019-12-22 22:49:04 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

在使用Vue-cli3构建的项目中，SVG图片在iPhone上无法正常显示，但安卓和本地环境均正常。问题出现在将SVG图片以img标签方式引入，并放置在assets/images目录下。解决办法是改用background方式引入SVG，并在vue.config.js中配置SVG支持。调整后，SVG在所有平台均能正常显示。同时，文中还提及可能存在的移动端适配问题，特别是在某些iOS设备上。

用vue-cli3初始化项目配置完，然后打包部署到服务器上，svg图片在iPhone不能正常显示（.png格式可以显示），在安卓可以正常显示，而且在本地开发者工具调试都可以正常显示。
下面是我的做法（iphone不正常显示的做法）
我是用img标签引入

<div class="CPRdiv" @click="mapLink('CPR')">
    <img  class="CPR"
    src="@/assets/images/CoastalPlankRoad.svg" type="image/svg+xml">
  </div>

把svg图片放在assets/images里面

在这里插入图片描述
在这之前在vue.config.js需要配置下引入svg的，不然会报错
在 chainWebpack

let path = require('path')
function resolve (dir) {
   
   
  return path.join(__dirname, dir)
}

module.exports = {
   
   
  publicPath: './',
  outputDir: 'dist',
  lintOnSave: true,
  runtimeCompiler: