我正在尝试使用响应式图像的srcset和sizesHTML 属性将特定图像提供给特定屏幕尺寸以进行性能优化和响应式设计。但是 Vue-loader 似乎不支持它们,有人遇到过类似的问题吗?如果不是,有什么可能的解决方案可以最好地优化主要受高清图像影响的应用程序性能。下面是我试图在 .vue 模板中实现的示例
<img srcset="../assets/img-1.jpg 300w, ../assets/img-1-large.jpg 100vw"
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">
Run Code Online (Sandbox Code Playgroud)
提前致谢。
我正在尝试新的React Hooks,由于本地状态更新时UI没有更新,所以我有点卡住了。这是我的代码,
import React, { useState, useEffect } from 'react';
import Post from './Post'
import PostForm from './PostForm';
import axios from 'axios';
function PostsList() {
const [posts, setPosts] = useState([]);
// setting up the local state using useEffect as an alternative to CDM
useEffect(() => {
axios.get('...')
.then(res => {
// the resposne is an array of objects
setPosts(res.data)
})
})
const handleSubmit = (data) => {
// the data I am getting here is an object with an identical …Run Code Online (Sandbox Code Playgroud)我正在尝试连接到 MySQL。我已经在我的根目录的 .env 文件中定义了 db 连接变量,并且我正在初始化app.module.ts文件中的连接。我现在面临的唯一问题是使用 CLI 创建或运行迁移时,我按照 typeorm 文档here来配置连接,但是当我运行时 typeorm migrate:create -n myNewTable,它应该在指定的目录中创建迁移文件,而是它在应用程序根目录中创建它,类似地,我通过使用 之后的-d标志typeorm migrate:create来指定目录解决了这个问题,但是当我尝试运行我的迁移文件时,我得到了这个
在任何配置文件中都找不到连接选项。
这是我的 app.module.ts 文件。
TypeOrmModule.forRoot({
type: 'mysql',
host: process.env.TYPEORM_HOST,
port: parseInt(process.env.TYPEORM_PORT, 10),
username: process.env.TYPEORM_USERNAME,
password: process.env.TYPEORM_PASSWORD,
database: process.env.TYPEORM_DATABASE,
synchronize: false,
migrations: [process.env.TYPEORM_MIGRATIONS],
cli: {
migrationsDir: process.env.TYPEORM_MIGRATIONS_DIR,
},
logging: (process.env.TYPEORM_LOGGING === 'true') ? true : false,
entities: [__dirname + '/../**/*.entity{.ts,.js}'],
}),
Run Code Online (Sandbox Code Playgroud)
这是我的 .env 文件
# use .ts for development, .js for production
TYPEORM_CONNECTION = mysql
TYPEORM_HOST …Run Code Online (Sandbox Code Playgroud)我想允许用户在同一事件中注册并上传图像,因此姓名和电子邮件等数据将进入 firestore,图像将进入存储桶,目前,我能够实现这两个功能,但分开,所以我有点坚持是如何将数据和图像链接在一起,以便我以后可以检索它们。我也想使用 Vuex 完成这项工作。下面的代码解释了我如何将数据和图像分别从我的 .vue 组件发送到 firestore 和 storage
import { storage } from '../firebase/init.js'
import firebase from 'firebase'
export default {
data(){
return {
email: '',
password: '',
image: null
}
},
methods: {
signUp(){
firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
.then(response => {
let user = {
id: response.user.id,
email: response.user.email
}
//here i want to do something to link this user to the upload image event below
})
},
uploadFile(e){
const file = e.target.files[0];
storage.ref('images/'+ file.name).put(file)
.then(response => {
console.log(response)
}) …Run Code Online (Sandbox Code Playgroud)firebase vue.js firebase-authentication vuex google-cloud-firestore
vue.js ×2
firebase ×1
html ×1
javascript ×1
mysql ×1
nestjs ×1
node.js ×1
react-hooks ×1
reactjs ×1
typeorm ×1
typescript ×1
vue-cli-3 ×1
vue-loader ×1
vuex ×1