Adding pictures to the select choices in bootstrap-vue

How can I include images in the dropdown list of a Bootstrap-vue select component like the example shown in the image below?

https://i.sstatic.net/5PQWd.png

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Answer №1

A possibility is to enclose an img tag within a <b-dropdown-item>, like so:

      <b-dropdown-item> <img scr="..."  /></b-dropdown-item>


new Vue({
  el: '#app'

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css">
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Include these scripts below vue.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzOoT7abK41JStQlAqVgRVzpbozo5smXKaP4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykW+2+9J3UJ46jBk0WLnaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCtnJSK3+MXmPNlEyWbmWh2IMqE24lrZiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

</head>

<body>

  <div id="app">

    <b-dropdown id="ddown1" text="Dropdown Button" class="m-md-2">
      <b-dropdown-item>
        <img src="https://cdn4.buysellads.net/uu/1/21673/1538677471-digitalocean-260x200-light_1_.png" alt="" border="0" height="50" width="65" style="max-width: 130px;">
      </b-dropdown-item>
      <b-dropdown-item> <img src="https://cdn4.buysellads.net/uu/1/21673/1538677471-digitalocean-260x200-light_1_.png" alt="" border="0" height="50" width="65" style="max-widdth: 130px;"></b-dropdown-item>
      <b-dropdown-item> <img src="https://cdn4.buysellads.net/uu/1/21673/1538677471-digitalocean-260x200-light_1_.png" alt="" bordeer="0" height="50" width="65" style="max-width: 130px;"></b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Something different here...</b-dropdown-item>
      <b-dropdown-item disabled>Inaccessible action</b-dropdown-item>
    </b-dropdown>
  </div>

</body>

</html>

Answer №2

I believe accomplishing this task using bootstrap-vue may be challenging due to its reliance on a native select input field. However, you can easily achieve it with vue-select. Check out the following link for more information:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Despite finding numerous articles and solutions, my code still refuses to work. What could I be overlooking? Below is a snippet of the code where the crucial part is marked at the comment '! HERE') <!-- Table with grades --> <table clas ...

javascriptphpjquerybootstrap-4

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

javascripttypescriptsap-cloud-platformsap-cloud-sdk

Creating a custom color scheme for school events

I am currently studying coding in school and have just started my coding journey 3 months ago. This is my first post on a forum, so please be kind! I am encountering an issue with the drag function. For an extracurricular activity for school kids, I came ...

javascripthtmlcss

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

javascripthtmlreactjscheckboxmaterial-ui

The error message "ng: command not found" popped up despite successfully installing the latest @angular/cli using npm linking

Here is the information about my current setup: Node version: v10.15.3 NPM version: 6.4.1 I attempted to run the following command: Command: npm i -g angular/cli An error occurred while executing: npm ERR! /usr/local/bin/git ls-remote -h -t ssh:// ...

javascriptnode.jsangulartypescriptnpm

Collapsing Bootstrap menu bar causing logo overlap

When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to h ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Implementing a new dynamic route post-deployment in Nuxt: A step-by-step guide

After successfully deploying my site on AWS using nuxt generate with dynamic routes, I encountered an issue. I wanted to add a new route without having to go through the entire deployment process again. For example: /post/1 /post/2 /post/3 ------- alread ...

vue.jsnuxt.jsstatic-site

Display every even number within the keys of objects that have values ending with an odd number

I need a way to print all even values that are paired with odd values in the object keys, but my code only works for arr1, arr3, and arr5. Can someone help me adjust the 'let oddArr' method (maybe using a loop) so that it will work for any array ...

javascriptarraysreactjsfor-loopnested-for-loop

Guide on converting AS3 to HTML5 while incorporating external AS filesAlternatively: Steps for transforming AS

I've been given the challenging task of transforming a large and complex Flash project into html5 and javaScript. The main stumbling block I'm facing is its heavy reliance on external .as files, leaving me uncertain about the best approach. Most ...

javascripthtmlactionscript-3flash

Listening to messages in a Vue.js template

Here is the template named "template-main": ... <template> ... <slot></slot> ... </template> ... Next, there is a simple page that utilizes this template: <template> <template-main> . ...

vue.jseventsevent-handlingvuejs3

Assign the value of one variable to another variable using the same keys

I'm facing a scenario where I have two arrays named array1 and array2. My goal is to transfer the values from array2 into array1 for the properties that exist in array1, while keeping the default values for any properties that are not present. One ap ...

javascriptangularjs

Toggle the visibility of the data depending on the dropdown option chosen

Currently, I am developing an AngularJS application and facing a requirement to toggle the visibility of data based on the selected value in a dropdown list. Specifically, if the user chooses "Show" from the dropdown, the content within a tab should be dis ...

javascriptjqueryhtmlangularjs

Why is it that JavaScript files are not fetched when injecting HTML into the DOM?

Currently, I am developing a login process and initiating an ajax post request from the browser. After performing some logic to verify the user’s credentials in the backend using asp.net core, I return a view which represents the application's homep ...

javascripthtmlasp.netajaxxmlhttprequest

Traditional method for comparing prevProps in componentDidUpdate

As I work on prototyping, I've noticed that when new props come in as an array of complex objects, prevProps.myProp===this.props.myProp always returns false. While using JSON.stringify for comparison seems to work, it doesn't feel very reliable. ...

javascriptreactjsreact-propsreact-state

When pressing the "back" button in the browser, the page displays JSON data instead of HTML, which is achieved by utilizing Rails and d3.js programming

Creating a visualization in Rails with a d3.js JSON callback can be done like this: View d3.json(document.URL, function(data){ // create visualization } Controller def index respond_to do |format| format.html do # render th ...

javascriptruby-on-railsjsonchartsd3.js

What is the process for importing a JSON file into the current Vue default configuration?

There is an incorrect answer that mentions tsconfig.json, which is no longer relevant in Vue projects. How can a JSON file be imported with VueJS / Typescript? I am assuming the configuration option { "compilerOptions": { "resolveJso ...

vue.js

Locate a specific item in an array using AngularJs based on a key and present its value on the View

Imagine you have an array of objects: $scope.objArr = [{key:1,value:'value1'},{key:2,value:'value2'},{key:3,value:'value3'}]; And a variable that corresponds to key. For instance: $scope.a = 3; In the Controller, you want ...

javascriptangularjs

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

javascriptjqueryangulartypescript

Encountering a "Parsing error: Unexpected token, expected ";" " when developing a React application with the provided code

I am currently working on developing a React application, and I have encountered an issue in my app.js file regarding the render function. Despite being new to JavaScript, I am unable to figure out why this error is occurring. Apologies if it is due to a s ...

javascriptreactjs