从本地文件在 javascript 中加载 SVG答案

【问题标题】：load SVG in javascript from local file从本地文件在 javascript 中加载 SVG
【发布时间】：2020-04-17 08:20:39
【问题描述】：

我在 html 中有一个 javascript；它显示为 PNG、JPEG 和网站（例如：https://i.imgur.com/KfehB6D.png、https://svgshare.com/i/Gzk.svg），但未显示 SVG（本地）。

这是我的javascript：

var img = 0;
var images = [ 'abc.svg', 'syz.svg' ];
var showHide = document.getElementById('showhide');
var showHideImg = document.getElementById('showhideimg');

showHide.addEventListener('click', function (e) {
  setImage();

});

function setImage() {
  if (img > images.length - 1) {
    img = 0;
  }
  var ans = document.getElementsByClassName("ans");
  for(var i = 0; i < ans.length; i++){
     ans[i].style.display = (img==0 ? "list-item": "none");
  }
  showHideImg.src = images[img++];
}
setImage();

和html

<div class="btn">
    <div class="showhide" id="showhide">
        <img id="showhideimg">
    </div>
</div>
<ul>
    <li>abc?</li>
    <li class="ans">xyz</li>
</ul>

【问题讨论】：

'abc.svg' 文件与 html 文件位于同一目录级别？
@SivaKondapiVenkata 没关系，浏览器不会在本地加载多个文件。
如果您正在开发网站，请使用网络服务器来托管您的内容。正如您发现的那样，如果您不这样做，您会遇到很多安全限制

标签： javascript html image svg

【解决方案1】：

当您通过 HTTP 提供工作目录时，加载 svg 或任何其他类型（例如 markdown）将起作用。

让我假设你的项目框架是这样的：

foo/
  ╠═ index.html
  ╠═ foo.js
  ╚═ abc.svg

在您的项目目录中运行本地 http 服务器。如果您安装了 Python：

$ python3 -m http.server

本地服务器启动后，转到http://localhost:8000

【讨论】：