Почему Vue преобразует мои одинарные кавычки в двойные в моем URL-адресе фонового изображения? - PullRequest
Новая
       26

Почему Vue преобразует мои одинарные кавычки в двойные в моем URL-адресе фонового изображения?

1 голос
/ 09 ноября 2019

Каждый пост, который я нашел по этой теме, касается использования Vetur или Prettier. Я не использую ни того, ни другого. Это базовая установка Vue CLI. Единственное, что я добавил, это sass-loader. Я добавил свой package.json внизу поста, чтобы подтвердить, что я на самом деле использую. 

<template>
    <div class="hero-section" :style="{ backgroundImage: 'url(' + currentBgImage + ')' }">
        <i class="fa fa-chevron-left" @click="previousImage()"></i>
        <i class="fa fa-chevron-right" @click="nextImage()"></i>
    </div>
</template>

<script>
  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;
      }
    },

Результат: 

<div class="hero-section" style="background-image:url("/src/assets/image_1.jpg");">
    <i class="fa fa-chevron-left"></i>
    <i class="fa fa-chevron-right"></i>
</div>

Я также пыталсявключая кавычки в значение вычисляемого свойства и в html, но результат был таким же: 

:style="{ backgroundImage: 'url(\'' + currentBgImage + '\')'

Теперь произошло нечто любопытное , когда я скопировал этот HTML из окна проверки. Когда я вставил его сюда, он изначально вставлялся как &quot; вместо ". Может ли это быть индикатором того, что идет не так? 

<div class="hero-section" style="background-image: url(&quot;/src/assets/image_1.jpg&quot;);">
    <i class="fa fa-chevron-left"></i>
    <i class="fa fa-chevron-right"></i>
</div>

package.json 

{
  "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": [
    "> 1%",
    "last 2 versions"
  ]
}

1 Ответ

1 голос
/ 09 ноября 2019

Почему Vue преобразует мои одинарные кавычки в двойные в моем URL-адресе фонового изображения?

Это не так.

См. Следующий пример, который невообще не пользуюсь библиотеками: 

const el = document.getElementById('div')

el.style.backgroundImage = 'url(https://vuejs.org/images/logo.png)'

console.log(el.style.backgroundImage)
console.log(el.outerHTML)
#div {
  height: 100px;
  width: 100px;
}
<div id="div"></div>

Обратите внимание, что в журнале консоли есть символы " вокруг URL, даже если они не отображаются в исходном значении. Они кодируются в &quot; в HTML, что правильно.

Браузер нормализует значение. Это не должно иметь никакого значения для URL, который запрашивается с сервера. Если ваше изображение не загружается, кавычки не являются проблемой. Это должно быть видно, проверив URL-адрес, используемый для загрузки изображения, на вкладке «Сеть» инструментов разработчика вашего браузера.

...