Adding assets used in state or in methods in the production build

Is your feature request related to a problem? Please describe. Am just starting out with Vue 3 using vite but I’ve not been able to find a way of having the assets used in the components state into the production build.

For example;

data() {
    return {
      testimonials: [
        {
          customer_name: "John Doe.",
          comment: "Some customer comment here...",
          image: "/src/assets/img/awesome_customer.png",
        },
        ...
      ]
    }
}

The above works in dev but the assets are not added to the production build when vite build runs and so the images throw a 404.

Describe the solution you’d like A description of how this can be achieved or a workaround for such situations. I’ve checked the asset handling section and searched around and I’ve not found a way of achieving this.

Describe alternatives you’ve considered I’ve tried using the require("/src/assets/img/awesome_customer.png") which worked with the vue-cli but the function is not defined and I can’t seem to find a way of importing it or making it available

[geneowak]

@xiaoxian521 You can find the sample repo here demonstrating what am referring to. The readme contains the steps to reproduce.

[geneowak]

@yyx990803 thanks, is there a better approach or is importing the only way at the moment?