Busqué varios tutoriales sobre cómo obtener la imagen al lado del título, sin embargo, son para conjuntos de datos pequeños que se ingresan manualmente. Con casi 3000 filas de datos, tiene que haber una mejor manera.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" SameSite=None; Secure> <title>Document</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js" ></script> <style id="compiled-css" type="text/css"> </style> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script> <script src="http://d3js.org/d3.v3.js"></script> <script src="static/js/app.js"></script> <script></script> </body> </html>Edité el código y los datos. No recibo ningún error en la consola de código vs, ni en la consola http. Sin embargo, el texto aparece en el menú desplegable, pero no las imágenes.
d3.csv("https://raw.githubusercontent.com/Shannon-Goddard/grow_data/main/Resources/csv/ALL_data.csv", function(error, data) { var select = d3.select("body") .append("div") .append("select") select .on("change", function(d) { $("#idselector").select2(); var value = d3.select(this).property("value"); alert(value); }); select.selectAll("option") .data(data) .enter() .append("option") .text(function (d) { return d.strain; }) .append(function(d) { const logo = document.createElement('img'); logo.src = d.logo; return logo; }); });No hay errores en mi consola vs code, ni en la consola http...
Sus imágenes están allí, JavaScript simplemente no admite mostrarlas de forma nativa y Select2 parece estar mal configurado. Si inspecciona el elemento en sus elementos <option> , verá sus imágenes allí, pero Select2 no sabe cómo representarlas. Los ejemplos de representación de imágenes con Select2 tienden a ocultar los datos de la imagen en un atributo de "datos" y recuperarlos con un renderizador templateSelection y templateResult del cliente .
Aunque si elimina Select2 como una dependencia, la pregunta es realmente un duplicado de ¿Cómo agregar imágenes en la lista de selección? sin embargo, la pregunta es bastante antigua y muchas de las respuestas están desactualizadas.
Dado que sus otras preguntas hacían referencia a jQuery, recomendaría probar SelectMenu de jQuery con un renderizador personalizado.
https://jqueryui.com/selectmenu/#custom_render
Preste especial atención al ejemplo data-style con "Seleccione una persona" (por ejemplo, "John Resig"), ya que utiliza un poco de inyección de estilo para que pueda agregar dinámicamente todas las imágenes en su HTML como una forma de etiqueta de estilo. .
style: item.element.attr( "data-style" ) Que se extrae de data-style="..." sin embargo, tenga en cuenta el escape HTML especial que es obligatorio cuando se inyectan estilos como este, como ' , etc.
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option> Para simplificar esto un poco y evitar que se escape parte del feo HTML, le recomiendo que simplemente almacene la URL de la imagen en el atributo de data (por ejemplo, cambie el nombre a data-image ) y construya la etiqueta de estilo manualmente desde JavaScript, por ejemplo, style: "background-image: url('" + item.element.attr( "data-image" ) + "');"
Tomará un poco de trabajo obtener el tamaño de la imagen y el estilo correctos para el menú desplegable, pero es exactamente para lo que se diseñó el renderizador personalizado de jQuery SelectMenu. Si encuentra que el renderizado no se ajusta a sus necesidades, aquí se proponen algunas alternativas que no son jQuery.