Question

我目前正在尝试在一个非常基本的网站上加载几个SVG图像，但是遇到了奇怪的问题。如果它是相关的，我正在处理由matplotlib创建的SVG文件，同时绘制各种参数化公式。我试图加载的文件只是加载了四个随机的SVG图像（当我尝试单独加载时，所有这些图像都能正常工作并加载）并将它们放在一个小网页中：

<html>
<img src="graphs/{0}.svg">
<img src="graphs/{1}.svg">
<img src="graphs/{2}.svg">
<img src="graphs/{3}.svg">
</html>

（{0}到{3}被替换为实际文件名，例如1070）。出于某种原因，每次都失败了。例如，

<html>
<img src="graphs/2286.svg">
<img src="graphs/7499.svg">
<img src="graphs/7444.svg">
<img src="graphs/7666.svg">
</html>

即使每个链接在我单独访问时都有效，但仍会失败。我也通过将文件：///Users/my_name/math_project/file.html作为url直接访问html，并用数字替换{0}等来尝试这个。我在绝对的智慧结束，如果有人能帮助我，我将非常感激。这是用于生成页面的源代码

import socket
import threading
import random
import os
import time
os.chdir("/users/my_name/math_project")
file = open("metadata.txt",'r') # file containing svg file names and equations
svg_data = file.read().split("\n")
file.close()
def handle_call(clientsocket,location): # handles a request
  l = time.time()
  res = clientsocket.recv(100000)
  res = res.split(b"\n")
  request = res[0].split(b" ")[1]
  if request == b"/favicon.ico":
    file = open("favicon.ico",'rb')
    stuff2 = file.read()
    file.close()
    clientsocket.send(stuff2)
  if request == b'/':
    file = open("file.html",'rb')
    res = file.read()
    file.close()
    res = str(res,'utf-8')

    res = res.format(*[random.choice(svg_data).split(":")[0] for a in range(4)])
    clientsocket.send(bytes(res,'utf-8'))
  if request.startswith(b"/graphs/"):
    file = open(place[1:],'rb')
    stuff = file.read()
    file.close()
    clientsocket.send(stuff)
sock = socket.socket()
port = random.randint(2000,10000)
while 1:
  try:
    sock.bind(('',port))
    break
  except BaseException:
    port = random.randint(2000,10000)
print("Bound to port {0}".format(port))
sock.listen(10)
while 1:
  threading.Thread(target=handle_call,args=sock.accept(),).start()

Answer 1

查看您的响应标头，Web服务器将返回错误的Content-Type的SVG文件。

Content-Type: image/svg

SVG文件的正确内容（MIME）类型为：

Content-Type: image/svg+xml

修复您的网络服务器。

Answer 2

你可以尝试的一个简单的事情就是指定一个doctype来告诉浏览器你正在使用html 5.你也可以将内容放在'body'标签中，以防万一没有混淆任何东西。< / p>

<!DOCTYPE html>
<html>
  <body>
  <img...
  </body>
</html

如果这没有帮助，请你澄清'失败'是什么意思？输出是什么样的，开发工具“网络”选项卡在尝试加载图像时会报告什么？您的样本是否完整html是程序确切输出的副本？如果没有，你能准确地粘贴输出的内容吗？

我的SVG图片未加载

2 个答案: