你的问题在于你试图在父组件中动态地引入图片，并期望子组件可以正确地解析这些图片。然而，require 函数在编译时执行，它不能用于运行时动态地引入图片。
一种解决方案是，你可以将图片转换为 base64 格式，并在父组件中将其作为字符串传递。子组件可以直接使用此字符串作为 img 标签的 src。
以下是如何实现这个解决方案的步骤：
- 转换图片为 base64 格式：你可以使用 Node.js 的
fs 模块和 to-buffer 模块来将图片转换为 base64 格式。下面是一个示例代码：
const fs = require('fs');
const toBuffer = require('to-buffer');
function imageToBase64(imagePath) {
return new Promise((resolve, reject) => {
const reader = fs.createReadStream(imagePath);
let data = '';
reader.on('data', (chunk) => {
data += chunk;
});
reader.on('end', () => {
resolve(Buffer.from(data).toString('base64'));
});
reader.on('error', (err) => {
reject(err);
});
});
}
// 使用这个函数来转换你的图片
imageToBase64('@/assets/images/add_btn.png')
.then(base64Image => {
console.log(base64Image); // 打印出 base64 格式的图片
})
.catch(err => {
console.error(err);
});
- 在父组件中传递 base64 图片：一旦你有了 base64 格式的图片，你就可以在父组件中将其作为字符串传递给子组件。
// 父组件
export default class IndustrialTVClass extends Vue {
icons: Icon = {
toggleUp: this.getImageAsBase64('@/assets/images/add_btn.png'),
toggleDown: this.getImageAsBase64('@/assets/images/ack-icon.png')
}
private async getImageAsBase64(imagePath: string): Promise<string> {
return new Promise<string>((resolve, reject) => {
imageToBase64(imagePath)
.then(base64Image => {
resolve(base64Image);
})
.catch(err => {
reject(err);
});
});
}
}
- 在子组件中显示图片：子组件可以直接使用父组件传递的 base64 字符串作为 img 标签的 src。
<template>
<img :src="up ? icons.toggleUp : icons.toggleDown" />
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
interface Icon {
toggleDown: string;
toggleUp: string;
}
@Component({})
export default class ChildComponent extends Vue {
@Prop({
required: false,
default: () => {
return {
toggleDown: '',
toggleUp: '',
};
}
}) icons!: Icon;
}
</script>
这样，你就可以在子组件中正确地显示父组件传递的图片了。不过需要注意的是，base64 格式的图片可能会导致你的应用程序体积增大，因此如果你的应用程序中有很多图片，或者图片文件很大，那么这种方法可能会导致性能问题。在这种情况下，你可能需要考虑使用其他方法，例如使用 CDN 来托管你的图片，并在父组件中直接传递图片的 URL。
极客观点
项目管理
HarmonyOS
html5
require之后处理成base64的形式去prop。一般来说静态资源，并且你不需要做处理的话，直接放到
public这种静态资源目录就可以，并不需要放到src/assets目录下。除非说你想要把这些资源在webpack/vite当中做小图转base64处理之类。