为什么不显示嵌套在我的选项元素中的图像？
[英]Why are the images being nested within my option elements not being displayed?
问题描述
奇怪的是，当我使用 div 元素作为父元素，然后在其中嵌套其他 div 时，会显示图像。 当我单击检查时，我可以看到图像在那里。 控制台没有通过错误，所以我真的不知道我可能哪里出错了
const url = "https://restcountries.eu/rest/v2/all"; const select = document.querySelector("select"); fetch(url).then(res => res.json()).then(data => data.forEach(countryApp)) function countryApp(myData) { let option = document.createElement("option"); let ctn = document.createTextNode(myData.name); option.appendChild(ctn); let img = document.createElement("img"); img.setAttribute("src", myData.flag); img.setAttribute("alt", "country flag"); img.setAttribute("width", 20); img.setAttribute("height", 20); option.appendChild(img); select.appendChild(option) }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Practise App</title> <link rel="stylesheet" href="index.css"> </head> <body> <select class="" name=""></select> <script src="index.js" type="text/javascript"></script> </body> </html>
1 个解决方案
解决方案1
1 2021-01-22 13:47:32
原因是您不能仅使用 HTML 将图像放入option中。 但是，您可以通过 CSS 获得结果，而不是使用 HTML 标签来实现此目的。
添加
<option style="background-image: url(path_to_the_image.format)>Some Option</option>
会帮助你。 但是，需要对其在不同浏览器上的工作方式进行测试。
Vue 元素未显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.