Currently, I am working with an array called thumbnails that holds the paths to various images. My goal is to use masonry in Vue to arrange these images in a grid format, but I'm encountering some difficulties achieving the desired outcome.
This is my initial approach:
<ul v-for="thumbnail in thumbnails" class="masonry">
<li v-html="thumbnail" class="masonry-brick"></li>
</ul>
However, the compilation results in this structure:
<ul class="masonry">
<li class="masonry-brick">
<img src="images/thumbnail1.jpg">
</li>
</ul>
<ul class="masonry">
<li class="masonry-brick">
<img src="images/thumbnail2.jpg">
</li>
</ul>
whereas what I actually want to achieve is:
<ul class="masonry">
<li class="masonry-brick">
<img src="images/thumbnail1.jpg">
</li>
<li class="masonry-brick">
<img src="images/thumbnail2.jpg">
</li>
</ul>
Additionally, I am considering whether eliminating the <img> tag altogether and setting the background-image of the <li> elements would be a better approach – however, I am unsure about the most effective way to implement this.