时间戳

首页 > 解决方案 > 使用导入的原始 html 时 v-html 无法按预期工作

javascript - 使用导入的原始 html 时 v-html 无法按预期工作

问题描述

我在 Vue2 中有一个带有 vue-cli/3 的组件，它有很多原始 HTML。与其把我的组件弄得乱七八糟，我想我会把它抽象为一个单独的模块并导入它。但是，在渲染时出现以下错误：

Vue warn]: Invalid component name: "
    <img src="../assets/img/elizabeth_i_article.jpg" alt="Elizabeth the I">
    <p>Elizabeth I, bynames <strong>the Virgin Queen</strong> and <strong>Good Queen Bess</strong>, (born September blah blah lot more ...

我在 vue 工具中看到 App 下有一个以 html 为名称的组件条目，并且我的值为 elizabethTheI ：“html here ....”。第一行中的图像也不会渲染。但所有其他 HTML 呈现正常。

我的设置是

elizabeth_I.js：

const elizabethTheI = `
    <img src="../assets/img/elizabeth_i_article.jpg" alt="Elizabeth the I">
    <p>Elizabeth 
    ... more html
  `
export default elizabethTheI;

Elizabeth_I.vue：

<template>
  <div class="container">
    <h1>Elizabeth the I</h1>

    <div v-html="elizabethTheI"></div>
  </div>
</template>

<script>
import elizabethTheI from "./assets/elizabeth_I";

export default {
  data() {
    return {
      elizabethTheI: elizabethTheI
    };
  }
};
</script>

我已经阅读了文档和几个教程，我认为我正确使用了 v-html 指令。任何关于我为什么会出现错误和图像不渲染的见解将不胜感激。

标签： javascriptvuejs2

解决方案

推荐阅读