Oct 21, 2022
Static VS Dynamic Images Paths in VUE3
Fundamental Conference 2022 Website
If you are looking to implement a static or dynamic image in your Vue project, you have come to the right place. While StackOverflow has many posts on this topic, I’ll show two ways (static and dynamic) and their differences to get the <img> in your current project.
For reference, I will be using the Fundamental Conference 2022 website specifically, the Our Team page. If you didn’t get a chance to attend the conference, we have attached all the recordings and presentation materials on our Agenda page.
Requirement
The requirement for this part is to show the right picture in a list of team members. Different pictures need to be allocated with the right names, job positions, etc. I will provide two different solutions to the same requirement.
Note: I’ve seen different solutions using different libraries. In my opinion, I think there is no need to overload the project with libraries for such a requirement.
Static <img> Solution
The first solution and not the ideal one for such a requirement is to statically point each list item. For a such solution, we don’t need to use a for loop, instead, we would need to create each list item. If Our Team page has 6 members, we would need to create 6 different lists.
Benefits
- Objects sent to the user that the server does not change.
- Can be used on images that won’t need to be changed in the future (e.g. icons)
Cons
- For the requirement mentioned above, this approach will not be a feasible solution as it will lead to a lot of repetitive code. Also if a team member is changed, we would need to mechanically remove it from the code.
Dynamic <img> Solution
The second solution is to use a for loop to iterate through all members and show the members pictures. This approach aligns better with the requirement that was presented in the introduction of this blog post.
For this type of project, there weren’t a lot of data so we stored information locally rather than using a database. The screenshot above is a snippet of how the data was stored in the source data array. The idea is to loop through the team and get the picture name. All the images are stored in a png format.
Another way is to store the names of the files with the path name and use them directly but that would mean a bit of repetition for each slide name (Check the DRY article). Also, you will see later in this post why it is not a good idea to use the path name.
In the code snipped above, I have looped through the team in the <li> and then pull the image paths. Also, don’t forget to add the require (). If the path file is not entered in require (), the image will not be found. The problem with this method is the @/assets/... is handled by Vue, and when passed as a prop is either treated as a literal or not handled right regarding filename hashing. Wrapping the image path in require would allow Vue’s hands to get a hold of the @/assets/... alias and properly find the image amidst the filename hashing.
Another solution to that is to create a function that gets the path and we just assign the item inside the path.
Benefits
- If a member is deleted or updated, you don’t need to manually delete that member from the list in the code.
Cons
- For static images that won’t change or get updated throughout the project, it is not necessary the most feasible solution.
Overall, you can choose to use each of the solutions proposed below based on the problem that you are trying to solve. There is always more than one solution to a certain problem or requirement. I hope you find one of the solutions above helpful for your project.
Happy coding :)
