Vue 3 Resolving Image Assets Build - vuejs3

Question

So I'm trying to build and deploy a Vue 3 website using Heroku. When I test the website locally using npm run dev it works just fine. However, when building I get the following error
Error:
Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
error during build:
Error: Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
at error (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:198:30)
at ModuleLoader.handleResolveId (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22508:24)
at C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22471:26
code:
Note: it's a fragment of the overall code, this is where the "issue" is. Also, I'm using Bulma to style
<section class="section">
<!-- to center columns, the parent has to be the image which is impossible -->
<div class="card">
<div class="card-image">
<figure class="image is-2by1 level">
<img src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
<div id="title-overlay-pad" class="is-overlay level-right">
<div id="title-overlay-background" class="has-text-centered">
<p id="title-home-page">delivAERO</p>
<p id="tagline-home-page">Revolutionizing the World's Delivery Infrastructure</p>
</div>
</div>
</figure>
</div>
</div>
</section>
Heiarchy:
UPDATE: ANOTHER SOLUTION
After getting a lot of help from Daniel, using the import method mentioned in their answer I was still getting errors. I assume this is more about the way the project is setup, but I found another solution.
The way, this post mentions is, it should be imported is as
import img from '#/assets/path/to/img.png'
Note: I have all my images in the assets folder on the src directory
However, this may give the following error:
error TS1232: An import declaration can only be used at the top level of a namespace or module.
From this post, the reason for this error is because imports should be declared first before any Javascript code.
In other words, it should look like:
<script setup lang="ts">
//any other imports here, before javascript code
import img from '#/assets/path/to/img.png'; // ASSETS
// Javascript code here
</script>
I'll still be accepting Daniel's answer as I believe that should be the solution for most.

Answer 1

Update
both require and import should work with default setup (used latest ATTOW vue-cli 5.0.6 and vue 3.2.13)
I've setup a new project with vue-cli and updated the helloWorld component with:
<template>
<div class="hello">
<img src="/images/logo.png">
<img :src="img"/>
<img :src="require('../assets/logo.png')">
</div>
</template>
<script setup>
import img from "../assets/logo.png"
</script>
All three versions work for me. If you are still having issues, I'd recommend the 1st option <img src="/images/logo.png">. The only thing you need to do is to move the image (logo.png) into the public folder (public/images/logo.png)
I've also noticed that with the default settings, the images that are "imported" or "required" get injected into the js as base64, which I'm not a fan of, so unless the configuration is updated to handle those, I'd recommend the first option.
AS an aside, I would also recommend removing spaces from the resource and directory names. You have a space in Design Pics, which servers should all handle properly, but it's not guaranteed .
When you use the image like this in the template, it is handled as a string
<img :src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
In order for Vue to bundle the asset it needs to know about it.
you can do this reference in-template
You can import it and then pass the reference the image as the variable in the template
<template>
<div>
<img :src="myImg" alt="Drone Image" width="1280" height="720">
</div>
</template>
<script setup>
import myImg from './assets/Design Pics/Drone/7_0030.png'; // import asset
</script>
or use require in the template:
<template>
<div>
<img :src="require(./assets/Design Pics/Drone/7_0030.png)" alt="Drone Image" width="1280" height="720">
</div>
</template>