title: Why does Vue convert my single quotes to double quotes in my background-image url?
body: <p>Every post I've found on this topic referts to using Vetur or Prettier. I'm using neither. This is a basic Vue CLI install. The only thing I've added is sass-loader. I've added my <code>package.json</code> to the bottom of the post to confirm what I'm actually using.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="hero-section" :style="{ backgroundImage: 'url(' + currentBgImage + ')' }"&gt;
          &lt;i class="fa fa-chevron-left" @click="previousImage()"&gt;&lt;/i&gt;
          &lt;i class="fa fa-chevron-right" @click="nextImage()"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'HeroSlider',
      props: {
        imageArray: Array
      },
      data() {
        return {
          selectedImage: 0,
        };
      },
      computed: {
        currentBgImage() {
          let array = this.imageArray;
          let result = array[this.selectedImage].image;
          return result;
        }
      },
  </code></pre>
  
  <p>The result is:</p>
  
  <pre><code>&lt;div class="hero-section" style="background-image:url("/src/assets/image_1.jpg");"&gt;
      &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
      &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also tried including the quotes in the computed property's value and in the html but the result was the same:</p>
  
  <pre><code>:style="{ backgroundImage: 'url(\'' + currentBgImage + '\')' 
  </code></pre>
  
  <p>Now, <em>something curious happened</em> as I copied this HTML from my inspection window. When I pasted it here it initially pasted like this with <code>&amp;quot;</code> instead of <code>"</code>. Could that be an indicator of what's going wrong?</p>
  
  <pre><code>&lt;div class="hero-section" style="background-image: url(&amp;quot;/src/assets/image_1.jpg&amp;quot;);"&gt;
      &lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;
      &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>package.json</em></p>
  
  <pre><code>{
    "name": "heroslider",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "core-js": "^3.3.2",
      "vue": "^2.6.10"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^4.0.0",
      "@vue/cli-plugin-eslint": "^4.0.0",
      "@vue/cli-service": "^4.0.0",
      "babel-eslint": "^10.0.3",
      "eslint": "^5.16.0",
      "eslint-plugin-vue": "^5.0.0",
      "node-sass": "^4.13.0",
      "sass-loader": "^8.0.0",
      "vue-template-compiler": "^2.6.10"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {
        "no-console": "off"
      },
      "parserOptions": {
        "parser": "babel-eslint"
      }
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {}
      }
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions"
    ]
  }
  </code></pre>