Question

我正在一个个人项目中，我正在使用Magic the Gathering的API搜索他们的卡数据库并将它们显示在我的网站上。我遇到的问题之一是存储在数据库中的卡片对象的参数显示为{G}，{R}，{B}，{U}，{W}等，但我希望它显示为显示为此处找到的众多图像之一：

https://media-dominaria.cursecdn.com/attachments/132/91/635465459096129102.png

考虑到该参数是一个字符串，我不知道如何用html图像元素替换大括号内字符串的内容，并使其在浏览器中正确显示。

例如：

mana_cost =“ {G} {W}”

我希望能够将“ {G}”显示为： http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png

和“ {W}”为：

https://static.giantbomb.com/uploads/original/8/88760/2277116-white_mana.png

欢迎任何帮助

Answer 1

您可以在客户端使用RegEx并用图像替换，然后在浏览器中显示。

{
  "name": "mithril-tuna-gallery",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run build-js & npm run build-css",
    "build-js": "watchify src/index.js -o js/tuna-gallery.js",
    "build-css": "node-sass -w src/index.scss css/tuna-gallery.css --output-style compressed"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "lightbox2": "^2.10.0",
    "mithril": "^1.1.6",
    "node-sass": "^4.11.0",
    "watchify": "^3.11.1"
  }
}

我将下载图像并将其放在本地文件夹中，以便您可以替换以下内容：

let strToReplace = '{G}'; strToReplace = strToReplace.replace(/{G}/, '<img src="http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png">');

提琴：file a feature request

如何在HTML中将字符串的一部分表示为图像？

1 个答案: