Broken image in dist package of vue application with webpack - vue.js

Question

I have a vue application with single file components, and I'm using webpack. One of the components has an image that works fine locally when I run it with npm run serve, but when I build the application (using npm run build) and deploy it online, I just see the broken image icon.
The image is is referenced in this in the component:
<img id="sockPhoto" :src="require('../assets/a_sock.png').default" alt="a_sock">
but if I inspect the same element in the deployed version, I see this:
<img data-v-f9e5c994="" id="sockPhoto" alt="a_sock">
which doesn't even have a src attribute.
This is the relevant part of my package.json:
{
"name": "my-app ",
"version": "0.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"bootstrap": "^4.5.0",
"bootstrap-vue": "^2.15.0",
"core-js": "^3.6.5",
"file-loader": "^6.0.0",
"jquery": "^3.5.1",
"jspdf": "^1.5.3",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"printd": "^1.4.2",
"vue": "^2.6.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.3.1",
"#vue/cli-plugin-eslint": "^4.3.1",
"#vue/cli-service": "^4.4.1",
"#vue/test-utils": "^1.0.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"jest": "^26.0.1",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.11",
"vue-test-utils": "^1.0.0-beta.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^[^.]+.vue$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
Also, this was working before my latest deployment, which contained some modifications, but nothing I can think of that should mess this up.
I am relatively new to vue and webpack so all help is much appreciated.
EDIT: I have already tried the basic <img id="sockPhoto" src="./../assets/36_37.png" alt="a_sock">, but that didn't even work locally. This answer provided me with the method above, using require(...).default which was working fine until this last deployment.