代码之家 › 专栏 › 技术社区 › Bitwise

在项目中使用本地图标svg

vue.js svg css

Bitwise · 技术社区 · 8 年前

我正在尝试使用css在屏幕上呈现SVG。这是我的文件结构。 Root > Assets > Icon > user-icon.svg . 因此,我尝试使用CSS添加如下内容:

.user-element {
  background-image: url(/assets/icons/user-icon.svg);
}

但屏幕上没有显示任何内容,我在控制台中收到以下错误:

GET http://localhost:4000/assets/icons/user-icon.svg 404 (Not Found)

我不想发出网络请求。更多的只是尝试在本地文件系统中查找SVG。这方面的任何帮助都会很好,谢谢!

2 回复 | 直到 8 年前

Roland 8 年前

在url前面放置以下内容: ./ 并将路径加引号( '' )如下所示:

.user-element {
  background-image: url('./assets/icons/user-icon.svg');
}

如果再次不起作用,则表示路径错误

但正如我在你的问题中看到的,你说图标在 assets/icon/user-icon.svg 但是在你使用的css代码中 assets/icons/user-icon.svg 所以这条路是错的。请尝试使用以下代码:

.user-element {
  background-image: url(./assets/icon/user-icon.svg);
}

edixon 8 年前

使用这种URL,只需一个路径,浏览器就会预先设置当前页面的方案、服务器和端口。要访问本地文件系统,请尝试 file 计划

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前