首页 > 解决方案 > React 应用程序实时加载公共图像,但不在 localhost 中

问题描述

我的练习反应应用程序部署在https://shakeel26.github.io/portfolio/ 工作完美,但同一个应用程序不会从 我尝试/public了多种方法的目录中加载任何图像。localhost导入图片,目前使用的一个是``` repo 在 https://github.com/shakeel26/portfolio

有人可以回答问题出在哪里,还有一件事要考虑的是图像在 2 周前加载,现在它们无法在 localhost 中加载。

标签: reactjs

解决方案


您正在使用 svg 代码而不是使用 .svg 文件名,例如:image.svg

你的代码:

backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
    '#fff',
  )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,

尝试将 URL 替换为../path-to-file/filename.svg


推荐阅读