I'm currently working on a Vue project using Typescript. Inside my assets folder I have some images I want to import with a separate Typescript file.
This project is bootstrapped by the vue-cli using Typescript, version 3.2.1
. What I have tried is directly importing into my file using require, which did not work. I then tried importing with import
to no avail
This is what I've tried:
./src/myFile.ts
import Image from '@/assets/img/hello.png';
Does not work
./src/myFile.ts
import Image from '../assets/img/hello.png';
Does not work
./src/myFile.ts
const Image = require('../assets/img/hello.png');
Does not work
The bundler will throw an error along the lines of Relative modules were not found
followed by the path of the file. I have made sure that the path is correct and I suspect this has to do with how TypeScript manages imports and how the Vue-cli is configured to bundle my files.
Here is a screenshot of the actual project. The file path is ./src/views/World/Combat/Game.ts
:
Found the issue: You need to declare the following module like so:
declare module "*.png" {
const value: string;
export default value;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.