Question

我在该主题上找到的每一篇帖子都涉及使用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时，发生了一些奇怪的事情。当我将其粘贴到此处时，它最初使用"而不是"进行粘贴。这可以指示出什么问题了吗？

<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"
  ]
}

Answer 1

为什么Vue会在背景图片网址中将单引号转换为双引号？

不是。

请参见以下示例，该示例根本不使用任何库：

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周围有"个字符，即使它们没有出现在原始值中也是如此。那些在HTML中被编码为"，这是正确的。

浏览器正在规范该值。它与服务器请求的URL不应有任何区别。如果您的图像未加载，则引号不是问题。通过在浏览器开发人员工具的“网络”标签中检查用于加载图片的URL，这应该很明显。

Vue为什么将我的单引号转换为背景图像URL中的双引号？

1 个答案: