Nuxt3 binding images broken path-CodePudding

I have an array of objects containing image and its respective information that I am iterating through. The path of the image is not rendering correctly.

Here is the sample array this is inside the data() method):

samples: 
  [
    { 'title': 'Numero Um', 'desc': 'Lorem ipsum dolor sit amet', 'img': '@/static/img/work/1.jpg' },
    { 'title': 'Numero Dois', 'desc': 'Lorem ipsum dolor sit amet', 'img': '@/static/img/work/2.jpg' },
    { 'title': 'Numero Tres', 'desc': 'Lorem ipsum dolor sit amet', 'img': '@/static/img/work/3.jpg' },
    { 'title': 'Numero Quatro', 'desc': 'Lorem ipsum dolor, ', 'img': '@/static/img/work/4.jpg' }
  ]

The the iteration is:

<div  v-for='(s, index) in samples' :key='index'>
   <img :src="s.img" alt="s.img">
</div>

What I get in the browser on the image src is - @/static/img/work/1.jpg

Now, if I hard code the @/static/img/work/1.jpg and not bind the src attribute the image displays and in the browser on the image src I get - /_nuxt/static/img/work/1.jpg

I'm not sure what Im doing wrong... the image exists and the path is correct. In previous version on Nuxt this worked fine - I'm upgrading an older project manually.

I also tried replacing the "@" with a "~" and still same issue.

ALSO, Im getting the same phenomenon when binding to the style and adding a background image dynamically:

<div :style="{ 'background-image': 'url(@/static/img/'   bannerUrl   ')' }">

This also used to work fine, but does not with Nuxt3.

Thanks in advance for any help.

CodePudding user response：

So I just realized that I cannot serve dynamic content from the "assets" directory, it must come from a "public" directory. Here is reference to the docs - https://nuxt.com/docs/getting-started/assets#example-1