剃刀页面表单中的SVG

时间:2020-04-09 15:51:24

标签: asp.net-core svg razor-pages tailwind-css

我正在使用Tailwind CSS,.NET Core 3.1 Razor Pages并出现以下错误 Found a malformed 'input' tag helper. Tag helpers must have a start and end tag or be self closing

使用此代码

 <form asp-route="Search" method="get">
        <label for="place-address" class="block text-sm font-medium leading-5 text-gray-700">Enter your address</label>
        <div class="mt-1 flex rounded-md shadow-sm">
            <div class="relative flex-grow focus-within:z-10">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                    </svg>
                </div>
                <input asp-for="Address" id="place-address" class="form-input block w-full rounded-none rounded-l-md pl-10 transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
            </div>
            <button type="submit" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-r-md text-gray-700 bg-gray-50 hover:text-gray-500 hover:bg-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" ">
                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                <span class="ml-2">Search</span>
            </button>
        </div>
    </form>

当我删除SVG元素时,错误消失了。如何保留SVG元素并使此表单正常工作

0 个答案:

没有答案