如何在 React 中创建相对路径以显示图像

伊特洛瓦托

我在我的 React 应用程序中遇到了问题,在通过 a 或图像后不会显示。CSS定义好了,控制台显示500错误,虽然我有图片等,有的代码是这样的;

          <img className="baner" src="/..img/icons/sold-out.png" alt="Item Sold Out"></img>

有些像这样

        <img className="medium" src={product.image} alt={product.name} />

在做了一些研究之后,我发现在路径的 beinning 中添加了一个 / 。例如;

          <img className="baner" src="/../img/icons/sold-out.png" alt="Item Sold Out"></img>

也就是说,我不知道如何将其添加到第二个示例中,或者它实际上甚至可以工作。尝试;

        <img className="medium" src=/{product.image} alt={product.name} />

产生错误,就像

        <img className="medium" src='/{product.image} alt={product.name} />
        <img className="medium" src={/{product.image}} alt={product.name} />

等。我不知道如何使这项工作。任何帮助表示赞赏。

记录者
<img className="medium" src={`/${product.image}`} alt={product.name}/>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Java中创建相对路径?

如何在 React 或 Next.js 中使用绝对路径而不是相对路径?

如何在无相对路径的Vue Component CSS内联样式中包含图像?

如何在git diff命令中显示相对路径?

如何在HTML中嵌入或显示具有绝对/相对路径的pdf文档

如何在 selenium 中为这个 HTML 元素创建一个相对路径?

如何在QMAKE中为头文件创建相对路径

如何在您的主目录中创建包含字母相对路径的变量$ ldir?

如何在php中控制相对路径

如何在Java中获取exe的相对路径

如何在python中解析相对路径?

如何在相对路径中包含bash脚本?

图像的相对路径在React应用程序中不起作用?

如何在使用MVC的现有ASP.NET Core应用中使用React Router设置相对路径

在React Router中设置相对路径

如何从Rmarkdown中的.tex文件夹(相对路径)获取图像?

如何在golang中解析相对路径到绝对路径?

Java-如何使用相对路径在目录中创建文件

如何在PowerShell中基于相对路径或绝对路径获取绝对路径?

如何从 snap 包中解析相对路径?

如何检查VBA中是否存在相对路径

如何使用相对路径在 XSLT 中引用 CSS

如何仅在“查找”输出中强制相对路径?

如何从postgresql中的URL中提取相对路径

如何从相对路径的MediaStore中读取文件?

laravel mix:如何在css中保持图像和字体的相对路径

创建exe时如何在PyInstaller中提供图标的相对路径

如何在表单标签(html)中的action属性中修复相对路径

如何避免在create-react-app中使用相对路径导入(/../../../redux/action/action1)