尝试在React应用程序中使文本与图像对齐时图像图标损坏

Question

我正在构建一个简单的React应用，尝试将某些文本与图像对齐时遇到了麻烦。目前，它显示了一个损坏的图标，我想知道我是否具有正确的图像路径。下面是我的文件结构的图像。

我要显示的图像是back-stroke2.jpg。我可以在代码编辑器中看到该图像，所以我认为问题不在于图像。在下面，我列出了Contact.jsx中的代码

DECLARE @DynamicPivotQuery AS NVARCHAR(MAX)
DECLARE @ColumnName AS NVARCHAR(MAX)

--Get distinct values of the PIVOT Column 
SELECT @ColumnName = ISNULL(@ColumnName + ',','') + QUOTENAME([month]) 
FROM (SELECT DISTINCT [Month] FROM MyTable) AS [Month]
 order by [month]

--Prepare the PIVOT query using the dynamic 
SET @DynamicPivotQuery = 
  N'SELECT Mem_Name, ' + @ColumnName + ' into ##myTempTable 
    FROM MyTable   
    PIVOT(SUM(Amount) 
          FOR Month IN (' + @ColumnName + ')) AS PVTTable' 
--Execute the Dynamic Pivot Query
EXEC sp_executesql @DynamicPivotQuery 

任何帮助将不胜感激。

Answer 1

您需要将图像文件导入到组件中。试试这个：

import myImageSource from '../images/back-stroke2.jpg'

...

render() (
    <img src={myImageSource} />
)