How to Add Images to SharePoint Web Part in Visual Studio

How to Add Images to SharePoint Web Part in Visual Studio

In this hint, I will explain how to use SharePoint Images Mapped Folder to add images to SharePoint Web Part in SharePoint Solution using Visual Studio.

You may also like to read Add Image URL inside a CSS file in SharePoint Visual Web Part.


Add Images to SharePoint Web Part in Visual Studio

Create Images Mapped Folder

  • Open your solution in visual studio.
  • Open “Solution Explorer”.
  • Right-click on the project name.
VS Solution Explorer
  • Add a “SharePoint  Images Mapped Folder”.
SharePoint Images Mapped Folder
  • A new “Images” folder will be added that holds a subfolder named as same as your project name.
Create Images Mapped Folder in SharePoint

Upload your images to Images Mapped Folder

  • Inside the subfolder > Add your images.
Upload images in SharePoint Visual Web Part

Insert Images in Visual Web Part user control

  • Double click on Visual web part page “.ascx”.
Open Visual Web Part user control in SharePoint
  • From SharePoint Images Mapped Folder > Sub Folder.
  • Drag the image that you want to add, and drop it in the visual web part page as shown below.
Add Images to SharePoint Web Part in Visual Studio
  • Navigate to Source code, you will note that a new HTML image tag has been added with the correct image path
Image Path in SharePoint Visual web Part

Conclusion

In conclusion, we have explained how to add Images to SharePoint Web Part in Visual Studio.

Applies To
  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint 2010.
You might also like to read
Have a Question?

If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.

Leave a Reply